
web前端/面试
文章平均质量分 77
web前端/面试
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
知道有哪些常用的网络协议,分别有什么作用
这些协议在网络通信、电子邮件、安全通信和文件传输等方面起到了重要的作用。每种协议都有其特定的应用场景和优势,根据实际需求选择合适的协议进行网络通信是非常重要的。请注意,网络协议的选择和使用可能会受到网络环境、安全要求、性能需求等多种因素的影响,因此在选择协议时需要进行综合考虑。常用的网络协议有很多种,每种协议在网络通信中都扮演着不同的角色。原创 2024-08-13 08:39:33 · 862 阅读 · 0 评论 -
强缓存和协商缓存的区别
1. 缓存验证方式强缓存:基于资源的过期时间或缓存规则进行验证。当浏览器发起请求时,会先检查本地缓存中资源的有效期。如果资源未过期,浏览器直接从本地缓存中获取资源,不发送请求到服务器1。这意味着在缓存有效期内,浏览器与服务器之间不会发生任何交互2。 协商缓存:基于资源的实体标签(ETag)或最后修改时间(Last-Modified)进行验证。当浏览器发起请求时,会发送资源的实体标签和最后修改时间等信息到服务器。服务器通过比较请求头中的信息与资源的当前状态进行验证。如果资源未发生变化,服务器返回304原创 2024-08-13 08:39:18 · 591 阅读 · 0 评论 -
域名解析使用的udp还是tcp为什么
域名解析(DNS解析)既使用UDP协议也使用TCP协议,具体使用哪种协议取决于场景和需求。原创 2024-08-13 08:38:05 · 786 阅读 · 0 评论 -
TCP和UDP的区别是什么说一说TCP 的三次握手,以及为什么它是可靠的说一说OSI 七层模型
每一层均有自己的一套功能集,并与紧邻的上层和下层交互作用。在顶层,应用层与用户使用的软件进行交互;在OSI参考模型的底端是携带信号的网络电缆和连接器4。每一层都确保数据以一种可读、无错、排序正确的格式被发送。OSI(开放系统互连)参考模型将网络结构划分为七层,从下到上依次为:物理层、数据链路层、网络层、传输层、会话层、表示层和应用层4。原创 2024-08-13 08:37:46 · 325 阅读 · 0 评论 -
new 一个对象或者函数的时候,它中间发生了什么事情?原理是什么?
继承:通过原型链实现继承,使得新对象能够访问构造函数原型上定义的属性和方法。封装:通过this关键字在构造函数内部封装对象的状态和行为。构造函数:是一个特殊的函数,用于初始化新创建的对象。原型:每个函数都有一个prototype属性,它是一个对象,包含可以由特定类型的所有实例共享的属性和方法。原创 2024-08-12 09:01:23 · 344 阅读 · 0 评论 -
了解storybook吗,为什么用vitepress搭建官网,做出一些决策的出发点是什么
Storybook是一个用于开发、测试和演示用户界面(UI)组件的工具。Storybook可以与多种前端框架(如React、Vue、Angular等)一起使用,并且支持多种语言和样式预处理器1。综上所述,选择Storybook和VitePress分别用于UI组件开发和官网搭建,是基于它们各自在开发效率、代码质量、文档生成、团队协作以及快速启动、部署和定制性等方面的优势而做出的决策。VitePress是一个由Vite和Vue组成的强大的静态网站生成器(SSG),以其简单、强大和快速的特点而受到青睐。原创 2024-08-12 09:01:08 · 576 阅读 · 0 评论 -
js阻塞dom解析如何解决
在JavaScript中,如果脚本执行时间过长或者脚本位置不当,可能会阻塞DOM的解析和渲染,导致页面加载缓慢或用户体验不佳。原创 2024-08-12 09:00:54 · 639 阅读 · 0 评论 -
浏览器的最大请求数量是多少,为什么这么设计?
浏览器的最大请求数量并不是一个固定的值,它受到多种因素的影响,包括浏览器类型、HTTP版本(如HTTP 1.1、HTTP 2等)、以及是否对同一域名进行请求等。原创 2024-08-12 09:00:37 · 2203 阅读 · 0 评论 -
requestAnimationFrame是宏任务还是微任务?
在JavaScript的事件循环中,宏任务(macro-task)和微任务(micro-task)是两种不同类型的任务,它们分别有不同的执行时机和优先级。的回调函数会在浏览器下一次重绘之前被调用,这通常发生在所有宏任务和微任务完成之后。但是,它并不直接参与宏任务或微任务的队列管理。的行为在某些方面与宏任务和微任务相似(比如它们都是在某个时间点之后执行),但它并不属于这两者中的任何一个。既不是宏任务也不是微任务,它属于浏览器提供的一个用于在下次重绘之前调用指定函数更新动画的方法。原创 2024-08-12 09:00:20 · 551 阅读 · 0 评论 -
浏览器点刷新按钮,重新输入URL和按F5的区别
点刷新按钮和按F5在大多数情况下都会触发页面的重新加载,并且都会检查缓存。它们之间的主要区别在于用户操作的明确性和可能导致的浏览器行为差异(尽管这种差异可能很小)。重新输入URL后按回车则被视为一个新的请求,浏览器通常会忽略之前的缓存,并直接向服务器发送请求。请注意,具体的行为可能因浏览器的具体实现和用户设置而异。为了获取最新的资源,用户可以选择进行强制刷新(如Ctrl+F5),这样可以明确地绕过缓存。原创 2024-08-12 08:59:16 · 651 阅读 · 0 评论 -
浏览器怎么再开一个线程,这边答出了web worker,pwa 和 浏览器插件中用到的service worker 还有 webAssembly
Web Worker:直接在浏览器后台线程中运行JavaScript代码。:虽然不直接运行JavaScript代码,但在后台处理网络请求和缓存,对PWA特别有用。:允许高效执行其他语言编写的代码,可以与Web Worker结合使用以提高性能。每种技术都有其特定的应用场景和优势,开发者可以根据实际需求选择最合适的技术来实现目标。原创 2024-08-12 08:58:45 · 352 阅读 · 0 评论 -
Next.js
Next.js 是一个使用 React 构建单页应用程序(SPA)的开源 JavaScript 框架。它由 Vercel(原 Zeit)公司开发,并自推出以来得到了广泛的关注和使用。原创 2024-08-12 08:58:21 · 576 阅读 · 0 评论 -
websocket和http的区别
综上所述,WebSocket和HTTP在协议类型、通信方式、连接建立与保持、通信实时性与效率、协议状态以及使用场景等方面存在显著的区别。在选择使用哪种协议时,需要根据具体的应用场景和需求来决定。WebSocket和HTTP是两种在网络通信中常用的协议,它们之间存在一些显著的区别。原创 2024-08-12 08:58:06 · 440 阅读 · 0 评论 -
vuex和pinia的区别
Vuex和Pinia都是Vue.js的状态管理工具,但它们在设计和使用上存在差异。Vuex是一个更完整的状态管理库,提供了丰富的功能和良好的社区支持,适合大型和复杂的项目。而Pinia则是一个轻量级的状态管理库,专注于提供一个简单的API来管理应用程序的状态,适合初学者和快速开发项目。在选择时,可以根据项目的具体需求和使用的Vue版本来决定使用哪一个。原创 2024-08-12 08:57:50 · 4723 阅读 · 0 评论 -
websocket的你是用来做什么,说说具体的做法
WebSocket 是一种网络传输协议,主要用于在客户端和服务器之间实现全双工通信。它允许服务器主动向客户端发送消息,并且双方可以在任何时候发送和接收数据,而不需要像 HTTP 那样每次都需要客户端发起请求。WebSocket 的主要用途包括开发实时网络应用程序,如在线聊天、股票交易、游戏等12。注意:在实际应用中,还需要考虑心跳机制、错误处理、重连机制等因素,以确保 WebSocket 连接的稳定性和可靠性。原创 2024-08-12 08:56:39 · 417 阅读 · 0 评论 -
express模块可以做什么
总之,Express模块为Node.js Web开发提供了强大的支持和灵活性,使开发者能够更快速地构建高效、可靠的Web应用程序和API。然而,值得注意的是,由于Web开发领域的快速发展,建议开发者在使用Express时参考最新的官方文档和社区资源,以获取最新的信息和最佳实践。Express模块是一个基于Node.js平台的快速、开放、极简的web开发框架。它提供了丰富的功能和灵活性,使开发者能够轻松构建Web应用程序和API。原创 2024-08-12 08:56:25 · 525 阅读 · 0 评论 -
单元测试是什么?你用什么做的单元测试?
这些单元通常是类中的方法或函数,并且测试是在隔离的环境中进行的,以确保测试的准确性和可重复性。例如,对于Web应用程序,还可以考虑使用Selenium进行端到端测试,虽然这不是典型的单元测试,但它对于验证Web应用程序的完整性和功能非常有用。在编写单元测试时,应该遵循一些最佳实践,如编写清晰的测试用例、确保测试的独立性、编写可重复和可维护的测试代码等。:用于Python编程语言的测试框架。:Java的另一个单元测试框架,它提供了比JUnit更丰富的功能,如分组测试、参数化测试、数据驱动测试等。原创 2024-08-12 08:56:08 · 386 阅读 · 0 评论 -
IOS和安卓的兼容性问题
IOS和安卓的兼容性问题主要源于它们各自使用不同的操作系统和开发框架。以下是关于这两个平台兼容性问题的一些关键点:操作系统差异:应用程序兼容性:数据和文件传输:技术挑战和解决方案:市场占有率和用户基础:未来趋势:请注意,以上信息仅供参考。在开发跨平台应用程序时,建议开发者仔细研究目标平台的技术文档和最佳实践,以确保应用程序的兼容性和用户体验。同时,也需要关注市场动态和技术发展趋势,以便及时调整开发策略。原创 2024-08-09 11:05:46 · 1724 阅读 · 0 评论 -
AI有幻觉,你是怎么理解AI的幻觉的
这种错误可以被视为AI的一种“幻觉”,因为它并非基于真实世界的逻辑或规律,而是由于模型的局限性所导致的。综上所述,AI的“幻觉”是指AI系统在处理信息、生成响应或执行任务时,由于数据偏差、模型局限性、上下文缺失或对抗性攻击等原因而产生的错误或误导性结果。:近年来,对抗性攻击成为了AI安全领域的一个重要问题。AI的“幻觉”是一个有趣的概念,它并非指AI本身像人类一样有主观感受或情感体验,而是指AI在处理信息、生成响应或执行任务时,可能会基于不完整、错误或误导性的数据,产生不符合实际或预期的结果。原创 2024-08-09 11:00:05 · 824 阅读 · 0 评论 -
TCP与UDP的区别
综上所述,TCP和UDP在连接性、可靠性、速度和效率、数据包大小以及适用场景等方面存在显著的区别。了解这些区别有助于根据实际需求选择合适的协议进行数据传输,以确保数据的安全、稳定和高效传输。TCP(传输控制协议)和UDP(用户数据报协议)是计算机网络中常用的两种传输层协议,它们在多个方面存在显著的区别。原创 2024-08-09 10:55:37 · 243 阅读 · 0 评论 -
知道http2吗?聊一下http
HTTP/2(超文本传输协议第2版,最初命名为HTTP 2.0)是HTTP协议的第二个主要版本,用于万维网。HTTP/2是HTTP协议自1999年HTTP 1.1发布后的首个更新,主要基于SPDY协议1。原创 2024-08-09 10:54:25 · 466 阅读 · 0 评论 -
webworker多线程可以避免阻塞,那为什么不把js所有的内容都放到webworker运行
虽然 Web Workers 确实能够在 Web 应用程序中实现多线程,有效避免长时间运行的任务阻塞主线程(UI 线程),但并非所有 JavaScript 内容都适合或应该被放到 Web Workers 中运行。因此,虽然 Web Workers 是一种强大的多线程技术,但并不意味着所有 JavaScript 代码都应该或能够放在其中运行。如果所有的 JavaScript 代码都放在 Web Workers 中,那么即使是简单的数据传递或 UI 更新也会变得复杂且可能性能不佳。原创 2024-08-09 10:37:27 · 344 阅读 · 0 评论 -
一个10g的文件怎么分片,怎么确定合适的分片的大小,分片hash过程怎么优化
对于一个大文件(如10GB的文件)的分片处理,选择合适的分片大小是一个重要的考虑因素,它会影响上传/下载的效率、内存使用和存储管理。下面将详细介绍如何分片、如何确定合适的分片大小,以及分片哈希过程的优化方法。原创 2024-08-09 09:40:30 · 1003 阅读 · 0 评论 -
文件秒传怎么实现
文件秒传的实现主要依赖于文件的唯一标识,通常是通过哈希算法(如MD5或SHA)来计算文件的哈希值作为这个唯一标识。原创 2024-08-09 09:22:53 · 390 阅读 · 0 评论 -
pnpm hoist机制
在 pnpm 中,hoist 机制并不是默认启用的,因为 pnpm 设计之初就是为了解决 npm 和 Yarn 中由于 hoist 引起的幽灵依赖(Phantom Dependencies)和包重复(NPM Doppelgangers)问题1。目录都是独立的,且只包含该项目直接依赖的包和这些包的直接依赖(通过链接指向 Store 中的包)12。由于硬链接和软链接的指向性,pnpm 能够确保相同的依赖包在磁盘上只存储一次,从而节省了大量的磁盘空间,并避免了包重复的问题23。的顶层,以减少依赖树的深度1。原创 2024-08-09 09:22:08 · 366 阅读 · 0 评论 -
文件上传,怎么做文件预览,文件在上传中预览可行吗
文件上传时的预览功能,对于提升用户体验来说是非常有帮助的。实现文件预览的具体方法取决于文件的类型(如图片、视频、文档等)以及你所使用的技术栈。下面是一些常见的文件类型预览方法及关于上传中预览的可行性讨论。原创 2024-08-09 09:21:00 · 403 阅读 · 0 评论 -
package A和package B依赖一个包的不同版本,如何统一成一个版本
如果可能的话,首先检查这些依赖的版本兼容性。然而,这种方法可能会导致一些难以预料的问题,因为并非所有的依赖都会按照你预期的那样工作。如果以上方法都不可行,并且这些包之间的冲突非常严重,你可能需要考虑将项目拆分成多个部分,每个部分使用不同的依赖版本。当不同的包(比如你的例子中的package A和package B)依赖同一个库的不同版本时,这可能会导致版本冲突,影响项目的编译或运行。如果可能的话,尝试与package A和package B的维护者联系,询问他们是否可以更新他们的包以支持更广泛的依赖版本。原创 2024-08-09 09:14:56 · 213 阅读 · 0 评论 -
什么是幽灵依赖,会引发什么问题
目录中存在但未被实际使用的依赖包。在使用npm或其他包管理工具安装依赖包时,有时会出现安装了一些不需要的或者不正确的依赖包的情况。为了解决幽灵依赖问题,一些包管理工具如pnpm采用了不同的策略。例如,pnpm通过使用符号链接(软链接)来创建依赖项的嵌套结构,将项目的直接依赖符号链接到。目录,确保项目中只包含必要的依赖。此外,使用适当的包管理工具也可以帮助减少幽灵依赖的发生。这样可以避免重复文件的复制,同时解决幽灵依赖问题12。的根目录,依赖包中的每个文件再硬链接到。目录中,占用了项目的存储空间1。原创 2024-08-09 09:12:34 · 344 阅读 · 0 评论 -
pnpm 软链接和硬链接的区别
硬链接通过直接指向文件的inode来共享文件内容,适用于需要节省磁盘空间且不需要跨文件系统或磁盘分区的场景。软链接通过指向文件或目录的路径来访问文件内容,适用于需要跨文件系统或磁盘分区访问文件的场景,也常用于解决特定的问题,如幽灵依赖。在pnpm中,这两种链接方式被巧妙地结合使用,以实现高效的包管理和依赖管理。原创 2024-08-09 09:12:00 · 434 阅读 · 0 评论 -
你做过什么有亮点的项目吗?
送几个我画的架构图把image.pngimage.png。转载 2024-08-06 10:40:27 · 71 阅读 · 0 评论 -
前端原生面试
如果元素的display为none,那么元素不被渲染,position,float不起作用,如果元素拥有position:absolute;属性那么元素将为绝对定位,float不起作用.如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么?原创 2024-08-01 14:30:14 · 956 阅读 · 0 评论 -
两种方法解决 this 在validator中不能使用
【代码】两种方法解决 this 在validator中不能使用。转载 2024-06-05 09:21:43 · 149 阅读 · 0 评论 -
世界500强面试题 | 这个你一定要看!(二)
这不是强制性的,但我认为这样的着装体现了对打算雇用我的公司及面试过程的尊重。面试官所问的问题是不一样的,不过许多问题都与我过去的经验有关,有些还带有玩笑的性质,比如“你如何让Google从Linux操作系统转换为Windows操作系统?他们问了我一些问题,以确信我的经历与简历上描述的内容相符,同时也为了避免在之后时间较长的面试中出现令他们尴尬的事情。这时,你在判断问题出在哪里时,会依次采取怎样的做法?如果你应聘的是程序设计员的工作,那么他们会提一些逻辑性问题,并要求你能够在白色书写板上用编码的方式思考。原创 2024-06-05 09:13:29 · 335 阅读 · 0 评论 -
世界500强面试题 | 这个你一定要看!(一)
想方设法让你的回答能够拉近你与面试官之间的关系,并表明你作为这个职位的应聘者,有着自己的优势。★你有一袋糖,有红色的,蓝色的,绿色的。★如果你有两个桶,一个装的是红色的颜料,另一个装的是蓝色的颜料。通过算术的方式来证明这一点。它们可能非常有诱惑力,让你戒备心全无,从而中了面试官的圈套,展现出自己的方方面面,包括你原本不打算暴露出来的某些个性。假如这项工作要求你具有创新精神,那么你可以说:“是的,我会上去,去见见曾经在这个星球上走过的那些最具有创新精神的人,问问他们最喜欢用什么方式来让自己尽可能保持创造力。原创 2024-06-05 09:12:02 · 461 阅读 · 0 评论 -
Vite为什么比Webpack快
Vite在本地能更快的根本原因,是借用了浏览器原生ESM能力,从而跳过了生成bundle的时间,再加上能够不依赖第三方插件将编译结果缓存,而且esbuild自身的也有着更快的运行速度,从而实现了Vite快速的冷启动。转载 2024-06-03 08:57:04 · 93 阅读 · 0 评论 -
深入JS执行原理:一文搞定 EventLoop、宏任务、微任务
在事件循环中,当主线程执行完当前的同步任务后,会检查事件队列中是否有待处理的事件。如果有,主线程会取出事件并执行对应的回调函数。这个循环的过程被称为事件循环(Event Loop),它由主线程和任务队列两部分组成。主线程负责执行同步任务,而异步任务则通过任务队列进行处理。这种机制保证了异步任务在适当的时机能够插入执行,从而实现了JavaScript的非阻塞异步执行。事件循环流程事件循环流程如下:主线程读取JavaScript代码,形成相应的堆和执行栈。转载 2024-05-31 08:42:00 · 57 阅读 · 0 评论 -
前端实现电子签名(web、移动端)通用组件
在现在的时代发展中,从以前的手写签名,逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。举个常用的例子,大家都用过钉钉,钉钉上面就有电子签名,相信大家这肯定是知道的。那作为前端的我们如何实现电子签名呢?其实在html5中已经出现了一个重要级别的辅助标签,是啥呢?那就是canvas[1]。canvasCanvas(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用。转载 2024-05-30 08:49:28 · 291 阅读 · 0 评论 -
前端面试必考题:介绍项目和项目难点
【面试官提问】介绍一下你近期(半年之内)做过的一个项目【面试官提问】介绍一下项目中的一个难点或者成就。转载 2024-05-29 09:15:22 · 112 阅读 · 1 评论 -
如何设计一个支持并发的前端缓存接口?
promise封装并发缓存到这里就结束啦,不过看到这里你可能会觉着没啥用处,但是其实这也是我碰到的一个需求才延申出来的,当时的场景是一个页面里有好几个下拉选择框,选项都是接口提供的常量。但是只接口提供了一个接口返回这些常量,前端拿到以后自己再根据类型挑出来,所以这种情况我们肯定不能每个下拉框都去调一次接口,只能是寄托缓存机制了。这种写法,在另一种场景下也很好用,比如将需要用户操作的流程封装成promise。例如,A页面点击A按钮,出现一个B弹窗,弹窗里有B按钮,用户点击B按钮之后关闭弹窗,再弹出C弹窗C。转载 2024-05-29 09:10:19 · 53 阅读 · 0 评论 -
前端调取摄像头并实现拍照功能
知道了这个前提,那么举一反三,我们就可以明白,虽然我们现在已经打开了摄像头,看到的视频好像是在连贯展示,但其实它也是一帧一帧拼到一起的。我们先看一下这个对象有哪些方法,你也许会看到下面的场景,会发现这个属性身上只有一个值为 null 的 ondevicechange 属性,不要怕,真正要用的方法其实在它的原型身上。,从这个名字你就能才出来,肯定和我们将要在画笔里画画的元素的宽度和高度有关,是的,你猜的没错,它就好像你设置一个 div 元素的高度和宽度一样,代表着你将在画布上画的截图的宽高属性。转载 2024-05-29 08:53:39 · 51 阅读 · 0 评论