大厂面试题分享面试题库

前后端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库 web前端面试题库 VS java后端面试题库大全

前言

回顾过往，至今已有三个年头了，《2023年我的前端面试准备》在小伙伴们的催促声中姗姗来迟。

本篇文章会持续更新，也会同步到公众号前端面试官，方便大家随时随地学习，完善成为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地址

三、建立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的实例，参数都通过构造函数传入。