前言
回顾过往,至今已有三个年头了,《2023年我的前端面试准备》在小伙伴们的催促声中姗姗来迟。
2021年我的前端面试准备
本篇文章会持续更新,也会同步到公众号前端面试官,方便大家随时随地学习,完善成为2023大家的前端面试准备
综合类
1、框架与库的区别
先看看基本概念
库:库更多是一个封装好的特定的集合,提供给开发者使用,(控制权在开发者手上)
框架:是一套架构,会基于自身的特点向用户提供一套相当于叫完整的解决方案,而且(控制权的在框架本身),使用者要找框架所规定的某种规范进行开发。
下面是我的理解
简单地来分析,我们把框架(Framework
)和库(Library
,简写Lib
)可以这样理解:
在一块空地上盖房子, 库 相当于提供了砖块、水泥、沙土、钢筋等建筑所需材料,你需要先建房子,然后装修才能入住,你想盖成什么样子的房子都可以,小洋楼?大别墅?四合院?......房子的类型你可以随心所欲,小洋楼+大别墅结合体?创意DIY?中西结合?
而 框架 呢则相当于先把房子的主体架构给你搭建好,比喻说你选了小洋楼框架,那么你就不用从零开始,可以直接跳过建房子步骤直接开始装修。但是房子的类型已经无法改变了
库 的使用非常灵活,但没有 框架 方便,这就是框架和库本质的区别。
像angular
、backbone
、vue
就属于框架,而jQuery、react、underscore
就是库,在前者中我们完全可以自由的使用后者,同时也可以没有前者的基础之上使用后者,都是很自由,控制权始终在我们的手中,但是使用框架时候就必须按照它的规范来进行模块化的开发
因为框架是有一套解决方案的,React
就是纯粹写UI
组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux
结合起来才叫框架,而React
本身只是充当一个前端渲染的库而已。
2、java和javascript的区别
首先,这两个家伙没有任何的血缘关系,java
是是由Sun
公司于1995年5月推出的;
javascript
是于1995年由Netscape
公司设计实现而成的,由于Netscape
公司与Sun
公司合作,Netscape
高层希望它看上去能够像Java
,因此取名为JavaScript
。
1、Java
是面向对象的语言,JavaScript
是脚本语言,是基于对象和事件驱动的语言。
2、Java
的源代码在执行之前必须经过编译,而JavaScript
的代码不需要,可以由浏览器直接解释执行。
3、java
主要在服务端运行;javascript
主要运行在客户端浏览器中。
4、JavaScript
是动态类型语言;而Java是静态类型语言。java
在定义了一个数组的长度以后就不能再改变了,但是javascript
却可以。
5、JavaScript
是弱类型的,即在使用前不需要声明,而是浏览器解释器在运行时检查数据类型;Java
属于强类型,即所有变量在编译前必须作声明;
6、JavaScript
的面向对象是基于原型的(prototype-based
)实现的,Java
是基于类(class-based
)的;
7、Java
的语法规则比JavaScript
要严格的多,功能要强大的多。
3、 浏览器输入url到页面渲染完成经历了哪些步骤
一、URL解析
这一步比较容易理解,在浏览器地址栏输入url
后,浏览器会判断这个url
的合法性
,以及是否有可用缓存,如果判断是 url
则进行域名解析,如果不是 url
,则直接使用搜索引擎搜索
二、域名解析
输入 url
并点击确定访问后,第二步是进行DNS
域名解析,如果输入的是 ip
地址,则可以省略这一步,因为DNS
域名解析,就是把域名解析成ip
地址
域名系统(DNS
): 域名系统是互联网的一项服务,是一个将域名和ip
地址相互映射的分布式数据库。
机器只能识别ip
地址,但是对于使用者来说,ip
地址是不容易被记忆的,为了能够让人们更轻松的记住网站地址,于是就有了域名系统,每一个域名都有一个对应的ip
地址
三、 检查浏览器是否有缓存
- 通过
Cache-Control
和Expires
来检查是否命中强缓存,命中则直接取本地磁盘的html(状态码为200 from disk(or memory) cache,内存or磁盘); - 如果没有命中强缓存,则会向服务器发起请求(先进行下一步的TCP连接),服务器通过
Etag
和Last-Modify
来与服务器确认返回的响应是否被更改(协商缓存),若无更改则返回状态码(304 Not Modified),浏览器取本地缓存; - 若强缓存和协商缓存都没有命中则返回请求结果。
浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
-
如果资源未缓存,发起新请求
-
如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
-
检验新鲜通常有两个HTTP头进行控制
Expires
和Cache-Control
:HTTP1.0
提供Expires
,值为一个绝对时间表示缓存新鲜日期HTTP1.1
增加了Cache-Control: max-age=,
值为以秒为单位的最大新鲜时间
四、建立TCP连接
这一步就是我们常说的三次握手与四次挥手,但是在说之前,我们需要先了解什么是TCP
,以及客户端和服务端的几种状态
TCP
: 传输控制协议(Transmission Control Protocol
),是一种面向连接的、可靠的、基于字节流的传输层通信协议。
SYN
: 同步序列编号(Synchronize Sequence Numbers
),是TCP/IP
建立连接时使用的握手信号。1表示建立连接。
FIN
: TCP报头的码位字段(Function Item Number
),值为1时表明发送方字节流结束,用于关闭连接。
ACK
: 确认字符 (Acknowledge character
),在数据通信中,接收站发给发送站的一种传输类控制字符,表示发来的数据已确认接收无误。
ISN/seq
: 初始化序列号(Initial Sequence Number
),由客户端或者服务器端创建的随机序列号。ISN不能设置为固定值,否则容易被攻击者猜到后续的确认号。
客户端的三种状态: CLOSED
(关闭-默认状态)、SYN_SENT
(请求连接)、ESTABLISHED
(连接成功)
服务端的三种状态: LISTENING
(监听-默认状态)、SYN_RCVD
(SYN_Received
等待请求确认)、ESTABLISHED
(连接成功)
三次握手
客户端向服务器端发送一段带有 SYN 标志的数据包,请求建立连接,并将自身状态改为 SYN_SENT
(请求连接) 状态;
报文内容: SYN=1,seq=x(此处seq为客户端随机生成的序列号,为了方便理解,我们假设为x)
服务器端收到来自客户端的TCP
报文后,结束 LISTENING
(监听) 状态,并返回一段带有 SYN + ACK 标志的数据包,表明已收到来自客户端的数据,同时将自身状态改为 SYN_RCVD(等待请求确认) 状态;
报文内容: SYN=1, ACK=1, seq=y, ack=x+1(确认字符为1,序列号为x+1,此处seq为服务器端随机生成的数值,为了方便理解,我们假设为y)
客户端收到来自服务器端的确认收到数据的报文后,再次发送一段报文,表明客户端已收到服务器端的确认信息,同时将自身状态改为 ESTABLISHED(连接成功) 状态,服务器端收到报文后,也将自身状态改为 ESTABLISHED(连接成功) 状态。 报文内容: SYN=1, seq=x+1, ack=y+1
注意:确认字符 +1 是为了方便接收方确认,大写表示状态,小写表示值
四次挥手
客户端向服务器端发送一段带有 FIN
标志的数据包,请求断开连接,并停止继续发送数据,主动断开 TCP
连接,同时将自身状态改为 FIN_WAIT1
,等待服务器端确认;
报文内容: FIN=1, seq=x
服务器端收到 FIN
数据包后,返回一段带有 ACk
标志的数据包,表明可以断开连接,同时将服务器状态改为 CLOSE_WAIT
,客户端收到此报文后,状态改为 FIN_WAIT2
;
报文内容: ACK=1, seq=y, ack=x+1
如果服务器端也准备断开连接,则会向客户端发送一段带有 FIN
标志的数据包,此时服务器状态为 LAST_ACK
,等服务器发送完所有数据后,再次向客户端发送 FIN + ACK
报文,确认断开连接;
报文内容: FIN=1, ACK=1, seq=z, ack=x+1
客户端收到FIN + ACk
报文后,再次向服务器端发送ACK
报文回应,等待一段时间后,如果没有收到来自服务器端的回应则直接进入 CLOSE
状态,服务器端在收到 ACK
报文后,直接进入 CLOSE
状态,不做回应。
报文内容: ACK=1, seq=x+1, ack=z+1
五、页面渲染
最后一步就是页面渲染了,这是一个很复杂的过程
-
解析
HTML
,并搭建DOM
树 浏览器接收到html
文件后将其解析成DOM
树,这个解析从接收到html
文件 的时候就已经开始了,并不是等到接收完成后才开始,解析的过程是自上而下,先解析当前节点的所有子节点,再解析兄弟节点及其子节点 -
解析
CSS
,并搭建样式树 浏览器将所有的css
包括其自身的样式全部解析成样式树,解析的过程中会自动去掉浏览器不能识别的样式 -
将
HTML
和CSS
结合,搭建Render
树(渲染树) 将每个HTML
节点与其对应的CSS
样式结合,搭建Render
树 -
根据渲染树计算布局 根据已经生成好的
Render
树 ,计算每个节点的颜色、尺寸及位置等信息 -
将元素绘制到页面上 将计算好的节点绘制到页面上,这个过程可能会产生 重绘 和 重排(回流),要尽量避免回流
重绘: 因为元素的颜色,字体等不改变尺寸及位置的样式改变而重新绘制,性能消耗较小
重排(回流): 因为元素的尺寸或位置改变而导致的重新绘制,这种可能会导致多处元素重新绘制,性能消耗较大
注意:
CSS
不会阻塞 DOM
树 的搭建,但是会阻塞页面的渲染,这是因为页面渲染需要先计算好节点的样式
HTML
文件中的外部资源会提前加载,不会等到渲染完成后再加载
JS
会阻塞 HTML
的解析,因为浏览器不知道 JS
脚本的内容,但JS
脚本有可能会操作DOM
,为了避免重复渲染,浏览器会先加载 JS 脚本
CSS
会阻塞 JS
的执行,因此需要将 <script>
标签放在 <link>
标签之前
4、重绘和重排(回流)
一、重绘不一定需要重排,重排必然会导致重绘
1、重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
1)添加、删除可见的dom
2)元素的位置改变
3)元素的尺寸改变(外边距、内边距、边框厚度、宽高等几何属性)
4)页面渲染初始化
5)浏览器窗口尺寸改变
2、重绘:是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
二、减少reflow、repaint
1、不要一条一条的修改DOM的样式,可以先定义好css的class,然后修改DOM的className。
2、不要把DOM结点的属性值放在一个循环里当成循环里的变量。
3、为动画的HTML元件使用fixed或absolute的position,那么修改他们的css是不会reflow
Vue3.0相关
1、 Composition Api 与 Vue 2.x使用的Options Api 有什么区别?
Options Api
包含一个描述组件选项(data、methods、props等)的对象 options;
API开发复杂组件,同一个功能逻辑的代码被拆分到不同选项 ;
使用mixin重用公用代码,也有问题:命名冲突,数据来源不清晰;
composition Api
vue3 新增的一组 api,它是基于函数的 api,可以更灵活的组织组件的逻辑。
解决options api在大型项目中,options api不好拆分和重用的问题。
2、Proxy 相对于 Object.defineProperty
有哪些优点?
proxy的性能本来比defineproperty好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。
- 可以* 监听数组变化
- 可以劫持整个对象
- 操作时不是对原对象操作,是 new Proxy 返回的一个新对象
- 可以劫持的操作有 13 种
3、 Vue3.0和2.0对比,哪些方面更加出色?
2.0和3.0原理分析
- Vue.js 2.x 中响应式系统的核心是 Object.defineProperty,劫持整个对象,然后进行深度遍历所有属性,给每个属性添加
getter
和setter
,实现响应式 - Vue.js 3.x 中使用 Proxy 对象重写响应式系统 可以监听动态新增的属性 可以监听删除的属性 可以监听数组的索引和length属性
- 实现原理: 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。
- 通过Reflect(反射): 对源对象的属性进行操作。 MDN文档中描述的Proxy与Reflect:
new Proxy(data, {
// 拦截读取属性值
get (target, prop) {
return Reflect.get(target, prop)
},
// 拦截设置属性值或添加新属性
set (target, prop, value) {
return Reflect.set(target, prop, value)
},
// 拦截删除属性
deleteProperty (target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
proxy.name = 'tom' ![]
Vue 3.0 性能提升主要是通过哪几方面体现的
1、响应式系统提升
vue2
在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty
使之变为响应式对象。
vue3
使用proxy对象重写响应式。proxy
的性能本来比defineproperty
好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。
优势:
- 可以监听动态新增的属性;
- 可以监听删除的属性 ;
- 可以监听数组的索引和
length
属性;
2. 编译优化
优化编译和重写虚拟dom,让首次渲染和更新dom性能有更大的提升 vue2 通过标记静态根节点,优化 diff
算法 vue3
标记和提升所有静态根节点,diff
的时候只比较动态节点内容
Fragments,
模板里面不用创建唯一根节点,可以直接放同级标签和文本内容
静态提升
patch flag,
跳过静态节点,直接对比动态节点,缓存事件处理函数
3. 源码体积的优化
vue3
移除了一些不常用的api
,例如:inline-template、filter
等 使用tree-shaking
4、Vue3.0 编译做了哪些优化?
a. 生成 Block tree
Vue.js 2.x
的数据更新并触发重新渲染的粒度是组件级的,单个组件内部 需要遍历该组件的整个vnode
树。在2.0里,渲染效率的快慢与组件大小成正相关:组件越大,渲染效率越慢。并且,对于一些静态节点,又无数据更新,这些遍历都是性能浪费。Vue.js 3.0
做到了通过编译阶段对静态模板的分析,编译生成了 Block tree。Block tree是一个将模版基于动态节点指令切割的嵌套区块,每个 区块内部的节点结构是固定的,每个区块只需要追踪自身包含的动态节点。所以,在3.0里,渲染效率不再与模板大小成正相关,而是与模板中动态节点的数量成正相关。
b. slot 编译优化
Vue.js 2.x
中,如果有一个组件传入了slot
,那么每次父组件更新的时候,会强制使子组件update
,造成性能的浪费。Vue.js 3.0
优化了slot的生成,使得非动态slot中属性的更新只会触发子组件的更新。动态slot
指的是在slot
上面使用v-if,v-for
,动态slot名字等会导致slot
产生运行时动态变化但是又无法被子组件track
的操作。c. diff
算法优化(此知识点进大厂可能会问到,由于篇幅较长,大家可以去官网看下)
5、Vue.js 3.0 响应式系统的实现原理?
1. reactive
设置对象为响应式对象。接收一个参数,判断这参数是否是对象。不是对象则直接返回这个参数,不做响应式处理。创建拦截器handerler,设置get/set/deleteproperty。
get
- 收集依赖(
track
); - 如果当前
key
的值是对象,则为当前key
的对 - 象创建拦截器
handler
, 设置get/set/deleteProperty
;
如果当前的 key 的值不是对象,则返回当前 key 的值。
set
设置的新值和老值不相等时,更新为新值,并触发更新(trigger
)。
deleteProperty
当前对象有这个 key 的时候,删除这个 key 并触发更新(trigger)。
2. effect
接收一个函数作为参数。作用是:访问响应式对象属性时去收集依赖
3. track
接收两个参数:target 和 key
-如果没有 activeEffect
,则说明没有创建 effect
依赖
-如果有 activeEffect
,则去判断 WeakMap
集合中是否有 target 属性
-WeakMap
集合中没有 target
属性,则 set(target, (depsMap = new Map()))
-WeakMap
集合中有 target
属性,则判断 target 属性的 map 值的 depsMap
中是否有 key 属性
-depsMap
中没有 key 属性,则 set(key, (dep = new Set())) -depsMap
中有 key 属性,则添加这个 activeEffect
4.trigger
判断 WeakMap 中是否有 target 属性,WeakMap 中有 target 属性,则判断 target 属性的 map 值中是否有 key 属性,有的话循环触发收集的 effect()。
Webpack相关
1、webpack的工作原理
WebPack
可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript
模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript
等),并将其转换和打包为合适的格式供浏览器使用。在3.0
出现后,Webpack
还肩负起了优化项目的责任。
2、webpack的构建流程
- 初始化参数:解析
webpack
配置参数,合并shell传入和webpack.config.js
文件配置的参数,形成最后的配置结果。 - 开始编译:上一步得到的参数初始化compiler对象,注册所有配置的插件,插件监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的 run 方法开始执行编译。
- 确定入口:从配置的entry入口,开始解析文件构建AST语法树,找出依赖,递归下去。
- 编译模块:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
- 完成模块编译:在经过第4步使⽤ Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
- 输出资源:根据⼊⼝和模块之间的依赖关系,组装成⼀个个包含多个模块的
Chunk
,再把每个Chunk
转换成⼀个单独的⽂件加⼊到输出列表,这步是可以修改输出内容的最后机会; 7.输出完成:在确定好输出内容后,根据配置确定输出的路径和⽂件名,把⽂件内容写⼊到⽂件系统。
3、Webpack的基本功能有哪些?
- 代码转换:
TypeScript
编译成JavaScript、SCSS
编译成CSS
等等 - 文件优化:压缩
JavaScript、CSS、html
代码,压缩合并图片等 - 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
- 模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件
- 自动刷新:监听本地源代码的变化,自动构建,刷新浏览器
- 代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过
- 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。
4、前端为什么要进行打包和构建?
代码层面:
- 体积更小(Tree-shaking、压缩、合并),加载更快
- 编译高级语言和语法(TS、ES6、模块化、scss)
- 兼容性和错误检查(polyfill,postcss,eslint)
研发流程层面:
- 统一、高效的开发环境
- 统一的构建流程和产出标准
- 集成公司构建规范(提测、上线)
5、与webpack类似的工具还有哪些?谈谈你为什么最终选择(或放弃)使用webpack?
同样是基于入口的打包工具还有以下几个主流的:
- webpack
- rollup
- parcel
从应用场景上来看:
- webpack适用于大型复杂的前端站点构建
- rollup适用于基础库的打包,如vue、react
- parcel适用于简单的实验性项目,他可以满足低门槛的快速看到效果
由于parcel在打包过程中给出的调试信息十分有限,所以一旦打包出错难以调试,所以不建议复杂的项目使用parcel
6、Loader和Plugin的不同?
不同的作用
- Loader直译为"加载器"。Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
- Plugin直译为"插件"。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
不同的用法
- Loader在module.rules中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件(test),使用什么加载(loader)和使用的参数(options)
- Plugin在plugins中单独配置。 类型为数组,每一项是一个plugin的实例,参数都通过构造函数传入。
7、有哪些常见的Loader?他们是解决什么问题的?
file-loader
:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件url-loader
:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去source-map-loader
:加载额外的 Source Map 文件,以方便断点调试image-loader
:加载并且压缩图片文件babel-loader
:把 ES6 转换成 ES5css-loader
:加载 CSS,支持模块化、压缩、文件导入等特性style-loader
:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。eslint-loader
:通过 ESLint 检查 JavaScript 代码
8、有哪些常见的Plugin?他们是解决什么问题的?
- define-plugin:定义环境变量
- commons-chunk-plugin:提取公共代码
- uglifyjs-webpack-plugin:通过UglifyES压缩ES6代码
Vite相关
Vite工作原理
Vite是一种现代化的前端开发工具,其工作原理主要分为以下几个步骤:
-
基于ESM构建:Vite作为一款基于ESM的前端构建工具,通过ES模块提供的动态导入功能来实现快速的开发和构建。
-
零配置开发:Vite允许开发者在不需要任何配置的情况下启动一个服务器进行开发,通过对文件的即时编译和缓存,来提高开发效率。
-
基于浏览器原生的ESM加载:Vite将所有文件视为ES模块,并且在开发时会直接从源代码加载模块,而不是打包后的文件,从而可以避免打包的过程带来的性能损失。
-
按需编译和缓存:Vite会按需编译和缓存依赖项,只有当需要更新时才会进行重新编译,缓存让开发者可以忽略无关的代码变化。
-
插件化架构:Vite的插件化架构可以方便地扩展其功能,例如使用插件来处理CSS、处理图片、压缩源代码等等。
通过以上几个步骤,Vite实现了快速、高效的前端开发和构建。
Vite 和 Webpack区别
区别如下:
(1)构建原理: Webpack 是一个静态模块打包器,通过对项目中的 JavaScript、CSS、图片等文件进行分析,生成对应的静态资源,并且可以通过一些插件和加载器来实现各种功能;Vite 则是一种基于浏览器原生 ES 模块解析的构建工具。
(2)打包速度: Webpack 的打包速度相对较慢,Vite 的打包速度非常快。
(3)配置难度: Webpack 的配置比较复杂,因为它需要通过各种插件和加载器来实现各种功能;Vite 的配置相对简单,它可以根据不同的开发场景自动配置相应的环境变量和配置选项。
(4)插件和加载器: Webpack 有大量的插件和加载器可以使用,可以实现各种复杂的构建场景,例如代码分割、按需加载、CSS 预处理器等;Vite 的插件和加载器相对较少
(5)Vite是按需加载,webpack是全部加载: 在HMR(热更新)方面,当改动了一个模块后,vite仅需让浏览器重新请求该模块即可,不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高。
(6)webpack是先打包再启动开发服务器,vite是直接启动开发服务器,然后按需编译依赖文件 由于vite在启动的时候不需要打包,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快。当浏览器请求某个模块时,再根据需要对模块内容进行编译,这种按需动态编译的方式,极大的缩减了编译时间。
Vite核心原理
-
Vite其核心原理是利用浏览器现在已经支持ES6的import,碰见import就会发送一个HTTP请求去加载文件。
-
Vite整个过程中没有对文件进行打包编译,做到了真正的按需加载,所以其运行速度比原始的webpack开发编译速度快出许多! 特点:
-
快速的冷启动:基于Esbuild的依赖进行预编译优化 (Esbuild 打包速度太快了,比类似的工具快10~100倍 )
-
增加缓存策略:源码模块使用协商缓存,依赖模块使用强缓;因此一旦被缓存它们将不需要再次请求。
-
HMR(热更新):当修改代码时,HMR 能够在不刷新页面的情况下,把页面中发生变化的模块,替换成新的模块,同时不影响其他模块的正常运作
-
聊聊 ESM、Bundle 、Bundleless 、Vite 、Snowpack - 大前端 - SegmentFault 思否
-
基于 Rollup 打包:生产环境下由于esbuild对css和代码分割并使用Rollup进行打包;
-
高效的热更新:基于ESM实现,同时利用HTTP头来加速整个页面的重新加载
Vite 冷启动为什么快
Vite 运行 Dev 命令后只做了两件事情,一是启动了本地服务器并注册了一些中间件;二是使用 ESbuild 预构建模块。
基于ESM的HRM热更新
所有的 HMR 原理:
目前所有的打包工具实现热更新的思路都大同小异:主要是通过WebSocket创建浏览器和服务器的通信监听文件的改变,当文件被修改时,服务端发送消息通知客户端修改相应的代码,客户端对应不同的文件进行不同的操作的更新。
Vite 的表现:
Vite 监听文件系统的变更,只用对发生变更的模块重新加载,这样HMR 更新速度就不会因为应用体积的增加而变慢 而 Webpack 还要经历一次打包构建。 所以 HMR 场景下,Vite 表现也要好于 Webpack。
为什么说vite比webpack更快
- webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。
- vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。
- vite在启动的时候不需要打包,意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快。
- 当浏览器请求某个模块时,再根据需要对模块内容进行编译。这种按需动态编译的方式,极大的缩减了编译时间,项目越复杂、模块越多,vite的优势越明显。
- 在HMR方面,当改动了一个模块后,仅需让浏览器重新请求该模块即可,不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高。
- 当需要打包到生产环境时,vite使用传统的rollup进行打包,因此,vite的主要优势在开发阶段。另外,由于vite利用的是ES Module,因此在代码中不可以使用CommonJS
后续会持续更新此文,建议点赞收藏。
每当我收集到一份面试纪实都会实时更新上来,希望能给友友带去些许帮助。也欢迎友友留言自己遇到的一些面试题目,我会认真看的哦!和友友们一起进步挣大钱是一件很有意义的事情!!!哈哈哈❤❤❤
掘金足迹
📌2021年06月23日14点26分发布了我的第一篇文章两年前端程序媛从0到18k的逆袭之路 | 2021年中总结
📌2021年07月27日10点09分发布了我的第二篇文章2021年我的前端面试
📌2021年12月13日13点55分发布了我的第三篇文章没有伞的程序媛必须努力奔跑|2021年终总结
📌2022年03月07日 09点09分发布了我的第四篇文章2022年我的前端面试准备
📌2022年07月13日 11点13分发布了我的第五篇文章程序媛的“浪漫”
📌2022年12月09日 15点57分发布了我的第六篇文章24岁程序媛实现了人生第一个小目标 | 2022年终总结
前端面试官系列新增一员大将
写在最后
我是伊人a,很高兴认识你。
- 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
- 本文首发于掘金,未经许可禁止转载💌