2022年前端开发面经总结（高频）

博主是23届的毕业生，目前在秋招阶段，总结一下近两个月来面试遇到的高频面经吧，以下回答网上的标准答案太多了，这里就写博主自己的理解吧

下面只介绍了高频题目，适合基础比较好的同学冲刺一下，*************************

前端面试题整理

一些重要的术语加粗标记了，注意注意！！

一、计算机网络和浏览器部分

1、介绍一下http协议的发展

1.0

• 短连接，每次请求都需要客户端与服务器之间建立一次连接，即三次握手和四次挥手的过程，十分耗费时间。

1.1

• 长连接，得益于管道技术的使用，建立一次连接，可以持续传输请求和响应，请求头内的Connection: keep-alive字段。虽然允许多个请求或响应发送，但须按序处理并按序返回，引发队头阻塞问题。
• 缓存策略，新增强缓存与协商缓存，由响应头内的cache-control、expires、no-store、no-cache等字段控制。
• range头域，允许只请求资源的某一部分，通过range字段来设置请求资源的字节范围。

2.0

• 以帧的形式传输数据，用有效序列标识帧属于哪一个流，每个流代表一个请求或响应。
• 多路复用，允许并发多个请求，允许先完成的请求先响应给客户端，避免了队头阻塞的问题。
• 头部压缩，通讯双方各保存一份头部信息表，第一次请求时将请求头所用的字段保存到表中，后续的请求只发送与之前请求有差异的部分，对于重复的请求字段，只需告知服务器所需的重复字段，服务器直接从头部信息表中读取即可。

2、https的实现流程

趁着这个机会简单的讲一下，网上有些写的篇幅太长了，我这里做个简述

1、客户端请求服务器，携带随机数R1并告知服务器自己支持哪些会话密钥生成算法（对称加密算法）

2、服务器向CA机构请求一个证书 和 证书私钥C1

3、服务器生成服务器 公钥1、服务器私钥1

4、服务器将 公钥1 和相关的 源数据 放入证书，并使用一种 加密算法（如MD5） 对源数据进行加密，得到 签名（数据摘要），随后使用 证书私钥C1 对证书进行加密，将 签名、证书、加密算法、会话密钥生成算法 和 随机数R2 一同发送给客户端

5、客户端用 内置的证书公钥 对证书进行解密，得到 证书，并使用 同一种加密算法 对证书中的源数据进行加密，得到 新的签名（数据摘要），若两个签名一致，说明原数据没有被篡改。

6、客户端生成 随机数R3，使用服务器 公钥1 加密R3，并发回给服务器

7、客户端使用 会话密钥生成算法 将R1、R2、R3生成 对称加密密钥

8、服务器收到R3后，将R1、R2、R3使用会话密钥生成算法生成对称加密密钥

9、双方通信时使用该对称加密密钥对数据进行加密（整个https流程都是为了这个对称加密密钥）

3、说一下http缓存

• 强缓存，服务器开启强缓存，客户端会将第一次请求响应的资源、响应头中的expires字段保存在本地，其中expires字段设置了强缓存资源的过期时间。当后续客户端再请求资源时，会对比本地时间与expires过期时间，如果过期，则需要重新向服务器发起对资源的请求，否则直接使用本地保存的资源。
• 协商缓存，举个栗子，服务器开启协商缓存，客户端会将第一次请求响应的资源保存在本地，并将资源版本信息（E-Tag = 111、Last-Modified-Since = 2018.6.3 ）保存在浏览器缓存表中，客户端第二次请求时会先请求浏览器缓存表中的缓存信息，在请求头中加入字段（If-None-Match = 111、If-Modified-Since = 2018.6.3），服务器获取之后比对E-Tag、Last-Modified-Since字段，若一致则返回304代码，客户端收到304后，直接使用本地缓存，否则返回新资源，客户端将新资源保存在本地，并将新E-Tag = 112、Modified-Since = 2018.6.8 存入浏览器缓存表。

4、输入URL跳转时的过程和TCP三次握手四次挥手

在我的面试经历中问的不多，但也是重点，网上很多相关知识，****************************

浏览器输入url到页面展示出来的全过程（含TCP三次握手四次挥手）

5、什么是跨域？影响了什么？怎么解决？

跨域：浏览器的同源策略对资源请求和响应做出的限制，所谓同源是指"协议+域名+端口"三者相同，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。

同源策略限制内容有：

• Cookie、LocalStorage、IndexedDB 等存储性内容
• DOM 节点
• AJAX 请求发送后，结果被浏览器拦截了

跨域解决方案

• 前端正向代理服务器
• JSONP，动态创建script标签，请求一个带参网址实现跨域通信
• nginx反向代理
• CORS，服务器设置 Access-Control-Allow-Origin 即可
• websocket

6、说一下事件循环(event-loop)

首先，JS是单线程的，在JS代码的执行过程中，会将同步代码放入执行栈中，将异步代码放入异步队列。执行栈中的同步代码依次执行，当执行栈为空时，轮询异步队列，异步队列中的由于类型不同，又分成宏任务队列和微任务队列，且微任务队列优先级高于宏任务队列，所以微任务队列里的任务的同步代码会先被放入执行栈中执行，再处理宏任务队列中的任务，每执行完一个宏任务，都会去执行微任务队列里的任务。如此轮询执行，直到所有队列为空。

下面放一个图帮助大家理解。

二、JS部分

1、JS中的数据类型有哪些？

• 基本数据类型： String、Number、Boolean、Null、undefined、Bigint、Symbol
• 引用数据类型：Object、Array、Map、Set

2、说一下原型链是什么

首先，从构造函数new出来的一个 实例对象，都有一个属性 __proto__指向 构造函数的prototype属性，该构造函数的ptototype属性称为 原型对象，原型对象中具有 constructor 属性指向构造函数，同时具有一个__proto__属性指向 Object构造函数的prototype 属性（因为该原型对象也是通过Object构造函数new出来的），Object的原型对象上的__proto__属性指向 null。从开头的构造函数new出来的实例对象，到最终的null，中间存在原型指向的链式结构，称为原型链。

下面放一个图帮助大家理解。

3、new关键字的实现过程

1、生成一个空对象

2、将该空对象的原型设置为构造函数的prototype对象（也就是空对象的__proto__指向构造函数的prototype属性）

3、让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）

4、判断函数的返回值类型，如果是基本数据类型，返回创建的对象。如果是引用数据类型，就返回这个引用类型的对象。

4、ES6有哪些新特性

• let和const
• Map和Set
• Bingint和Symbol
• async和await
• Promise
• class
• 箭头函数
• 拓展运算符
• 模板字符串

5、说说你对闭包的理解

闭包是一个定义在函数内部的函数，它能够访问上层函数作用域中的变量，使其不被回收，这就是闭包。

闭包常见的应用场景有：节流、防抖、函数柯理化

节流和防抖函数可以写写，函数柯理化比较偏，有兴趣可以学学

6、说说你进行数据深拷贝的几种方式

• JSON.parse(JSON.stringify(obj))
• 第三方库函数，如lodash库的clonedeep()
• 手写深拷贝

function cloneDeep(obj){
	let newObj
	// 是对象，进行深拷贝
	if(typeof obj == 'object' || obj != null){
		// 判断一下obj是对象还是数组
		newObj = obj instanceof Object ? {} : []
		// 对源数据中的属性遍历，递归深拷贝
		for(let i in obj){
			newObj[i] = cloneDeep(obj[i])
		}
    }
    //不是对象，则直接赋值
    else{
		newObj = obj
	}
	return newObj
}

三、Vue部分

1、Vue生命周期

直接放图，大家看吧，最好背的滚瓜烂熟，一般问vue开头就是生命周期，把这个给面试官讲的仔仔细细，面试官大概不会为难你后面的vue的知识了，因为他会觉得你vue学的不错

2、Vue 组件间的传值的几种方式

• 父子组件 props / emit
• 祖孙组件 $attrs / $listeners
• 父子、祖孙都能用的 provide / inject
• 所有组件共用的 vuex、Vue2全局事件总线(eventBus)、Vue3全局事件总线(mitt)、localStorage

3、Vue中key的作用

简单点说就是高效更新虚拟dom。具体是怎么做的呢，会的已经想起来了，不会的看视频吧。

尚硅谷vue课程 P30讲的就是key