前端面试题总结一

1.Vue2和Vue3的区别至少说5点

(1).vue2使用的是webpack形式去构建项目的，vue3使用vite构建项目

(2).main.js文件

vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数
vue3中需要使用结构的形式进行操作，引入的是工厂函数
vue3中app组件中可以没有根标签

(3).Vue 3 比 Vue 2 更快，因为它采用了新的渲染引擎，这使得它在大型应用程序中更快。

(4).vue2的响应式原理用Object.defineProperty的get和set进行数据劫持，从而实现响应式

• vue2中只有get和set方法去进行属性的读取和修改操作，当我们进行新增，删除时，页面不会实时更新
• 直接通过下标改数组，页面也不会实时更新

vue3中响应式原理使用Proxy进行代理，使用window内置对象Reflect反射，学了Es6的语法的就知道我们在使用Proxy进行代理，好比甲方公司给出需要什么技术的前端工程师，让乙方去干招聘、面试等环节

Proxy可以拦截对象中任意的属性变化，当然包括读写，添加，删除等
Reflect对源对象属性进行操作

(5).生命周期

vue2                    vue3

beforeCreate ===> setup
created          =======> setup
beforeMount  ===> onBeforeMount
mounted        =======> onMounted
beforeUpdate ===> onBeforeUpdate
updated         =======> onUpdatedupdated
beforeDestory ==> onBeforeUnmount
destoryed        =====> onUnmounted 

(6).全局API的转移

 

 

2.Vue3中组件通信的流程【父传子，子传父】

父子组件通信

props/emits

• Father.vue 通过 prop 向 Child.vue 传值（可包含父级定义好的函数）
• Child.vue 通过 emit 向 Father.vue 触发父组件的事件执行

使用props(父传子)，使用emit(子传父)

v-model / emits(父子互相通信))
通过Vue3的文档可以发现，这个指令的用法发生了一定的变化。在之前，我们要想实现一个自定义的非表单组件的双向绑定，需要通过xxxx.sync的这种语法来实现，如今这个指令已经被废除了，而是统一使用v-model这个指令。

父组件：支持多个数据的双向绑定 

仅父传子通信

父组件向子组件传递一个数据，可以用这两种方式：

• v-bind （上面父子通信中得prop）
• refs获取子组件内部某个函数，直接调用传参（这里简称refs方式）

3.Apply/call/bind的原理是什么？

在“多数情况下”，this 遵循的指向机制。在另外一些情况下 this 是不遵循这个机制的。改变 this 的指向，我们主要有两条路：

• 通过改变书写代码的方式做到（比如箭头函数）。
• 显式地调用一些方法来帮忙（比如call/apply/bind）。

call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。 即：可以改变当前函数的this指向；还会让当前函数执行。

实现

call和apply的实现，都是使用将函数放到字面量obj的某个属性中，使函数中的this指向obj这个字面量对象

apply

与call方法类似，call方法接收的是一个参数列表，而apply方法接收的是一个包含多个参数的数组。

实现

自己实现一个apply方法定义(例如applymy)。实现方法与call类似，不过在接收参数时，可以使用一个args作为传入的第二个参数。直接判断如果未传入第二个参数，直接执行函数；否则使用eval执行函数。

bind

bind() 方法创建一个新的函数，不自动执行，需要手动调用bind() 。这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

用法

将obj绑定到fun函数的this上，函数fun可以使用obj内部的属性，和传入的变量。

此外，bind方法绑定的函数还可以new一个实例，不过此时的this会发生改变。

4.说说你对原型和原型链的理解？

原型

在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象，使用原型对象的好处是所有对象实例共享它所包含的属性和方法

原型链

每个对象拥有一个原型对象，通过 proto 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null (Object.proptotype.__proto__指向的是null)。这种关系被称为原型链，通过原型链一个对象可以拥有定义在其他对象中的属性和方法

5.说说你对ES6中Generator的理解

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

Generator函数

Generator函数是ES6引入的新型函数，用于异步编程，跟Promise对象联合使用的话会极大降低异步编程的编写难度和阅读难度。

执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态

形式上，Generator函数是一个普通函数，但是有两个特征：

• function关键字与函数名之间有一个星号
• 函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）

注意：yield语句只能用于function*的作用域，如果function*的内部还定义了其他的普通函数，则函数内部不允许使用yield语句。

注意：yield语句如果参与运算，必须用括号括起来。

6.说说你对Event Loop的理解

答案

7.说说Promise和async/await 的区别？

Async/await：是一个用同步思维解决异步问题的方案

1. 会自动将常规函数转换成Promise，返回值也是一个Promise对象
2. 只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
3. 异步函数内部可以使用await
4. await 放置在Promise调用之前，await 强制后面点代码等待，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果
5. await只能在async函数内部使用,用在普通函数里就会报错

和Promise相比较 相同点：

为了解决异步流程问题，promise是约定，而async更优雅

区别：

1. Promise是ES6，而async是ES7
2. Promise原来有规范的意义，Promise a，b，c，d 等规范，最终确定的是Promise a+ 规范
3. Promise链式操作，自己catch异常。async则要在函数内catch，好在现在catch成本较低
4. Promise有很多并行神器，比如Promise.all\Promise.race等。这些是async没法搞定的
5. Promise是显式的异步，而 Async/await 让你的代码看起来是同步的，你依然需要注意异步
6. Promise即使不支持es6，你依然可以用promise的库或polyfil，而async就很难做，当然也不是不能，成本会高很多
7. async functions 和Array.forEach等结合，很多tc39提案都在路上或者已经实现，处于上升期，而promise也就那样了

总结：Async/awati 简单好用，是大势，肯定得学，而async的使用绕不开Promise，所以Promise是必会的。

8.说说浏览器事件循环和nodeJs的事件循环的区别？

 答案

9.说说你对浏览器缓存机制的理解

缓存过程分析

浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中

简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。

为什么我们要去使用缓存

（1）减少网络带宽消耗

无论对于网站运营者或者用户，带宽都代表着金钱，过多的带宽消耗，只会便宜了网络运营商。当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。

（2）降低服务器压力

给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。

（3）减少网络延迟，加快页面打开速度

带宽对于个人网站运营者来说是十分重要，而对于大型的互联网公司来说，可能有时因为钱多而真的不在乎。那Web缓存还有作用吗？答案是肯定的，对于最终用户，缓存的使用能够明显加快页面打开速度，达到更好的体验。

10.说说你对浏览器内核的理解

浏览器主要分两部分：渲染引擎和js引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。 

 常见的浏览器内核有哪些？
Trident 内核：IE,MaxThon,TT,The World,360, 搜狗浏览器等。[又称 MSHTML]
Gecko 内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等
Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]
Webkit 内核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）] 

11.说说你对Vue的响应式原理的理解

vue响应式是什么？

首先官网的解释是：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

实现的原理就是：

Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。

getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher监听，通知dom修改刷新。 

12.Methods  watch  computed区别是什么？

作用机制上：

1. methods，watch 和 computed 都是以函数为基础的，但各自却都不同
2. watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动
3. 对 methods：methods 里面是用来定义函数的，它需要手动调用才能执行。而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / computed，methods 不处理数据逻辑关系，只提供可调用的函数

从性质上：

1. methods 里面定义的是函数，仍然需要去调用它。
2. computed 是计算属性，事实上和 data 对象里的数据属性是同一类的（使用上）。
3. watch：类似于监听机制+事件机制

watch 和 computed 区别

1. 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2. 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3. 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return
4. watch擅长处理的场景：一个数据影响多个数据 -------搜索框。
5. computed擅长处理的场景：一个数据受多个数据影响 -- 使用场景：当一个值受多个属性影响的时候--------购物车商品结算

13.说说你对Virtual  DOM的理解？

什么是虚拟dom?

虚拟dom从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

为什么需要虚拟dom?

DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的

操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验

很多人认为虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势，但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI

14.说说你对nextTick的理解和作用

官方对它的定义是：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

为什么要有nextTick

vue中的Dom更新是异步的，是异步的意味着当被处理数据是动态变化时，此时对应的Dom未能及时更新（同步更新）就会导致数据已经更新（model层已经更新）而视力层未更新（Dom未更新）此时就需要使用nextTick了。
当你想要拿到更新后的Dom，一定要在nextTic的回调函数中去获取更新后的Dom的值。

使用场景

1、在created生命同期里，想操作（渲染后的视图）—不存在。
因在created执行时，Dom并未进行任何渲染，因此拿不到。
如非要等，可以在nextTick的回调函数中去操作。
2、在mounted生命同期表示所有的dom都 已挂载并渲染完成，在此钩子函数操作dom几乎没有问题，但mounted可并没有承诺所有的子组件都一起被挂载，如果等所有整个视图全部渲染完毕也可以考虑使用nextTick代替mounted比较保险。 

15.说说你对webpack的理解

 答案

16.谈谈GET和POST的区别

（1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）

（2）post发送的数据更大（get有url长度限制）

（3）post能发送更多的数据类型（get只能发送ASCII字符）

（4）post比get慢

（5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据

POST 方法比 GET 方法安全？
按照网上大部分文章的解释，POST 比 GET 安全，因为数据在地址栏上不可见。
然而从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输，只要在网络节点上抓包，就能完整地获取数据报文。
要想安全传输，就只有加密，也就是 HTTPS 

17.说说HTTP和HTTPS的区别，HTTPS加密原理是?

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

　　HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

http和https有什么区别？

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

　　HTTPS和HTTP的区别主要如下：

　　1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

　　2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

　　3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

　　4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

https实现原理

 HTTPS 协议之所以是安全的是因为 HTTPS 协议会对传输的数据进行加密，而加密过程是使用了非对称加密实现。但其实，HTTPS 在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段。

HTTPS的整体过程分为证书验证和数据传输阶段

① 证书验证阶段

1. 浏览器发起 HTTPS 请求
2. 服务端返回 HTTPS 证书
3. 客户端验证证书是否合法，如果不合法则提示告警

② 数据传输阶段

1.当证书验证合法后，在本地生成随机数

2.通过公钥加密随机数，并把加密后的随机数传输到服务端

3.服务端通过私钥对随机数进行解密

4.服务端通过客户端传入的随机数构造对称加密算法，对返回结果内容进行加密后传输

18.TCP为什么要三次握手？

首先我们了解一下什么事TCP：

TCP协议是一个面向连接的、可靠的、基于字节流的传输层协议

TCP为什么要三次握手：

原因：避免重复连接

比如在网络环境比较复杂的情况，客户端可能会连续发送多次请求。如果只设计成两次握手的情况，服务端只能一直接收请求，然后返回请求信息，也不知道客户端是否请求成功。这些过期请求的话就会造成网络连接的混乱。

所以设计成三次握手的情况，客户端在接收到服务端SEQ+1的返回消息之后，就会知道这个连接是历史连接，所以会发送报文给服务端，告诉服务端。

所以TCP设计成三次握手的目的就是为了避免重复连接。

然后可以设计成四次握手？五次握手？不可以？答案是也是可以的，不过为了节省资源，三次握手就可以符合实际情况，所以就没必要设计成四次握手、五次握手等等情况

19.说说Proxy代理的原理

跨域是指在浏览器环境中存在的一种资源同源保护策略。当页面使用ajax/fetch进行网络请求或者页面进行资源请求时，网络协议、域名、端口不一致时就会触发浏览器的同源策略保护机制。

设置 proxy 目的

为解决在本地开发时XHR异步请求跨域问题（如果你的后端小伙伴愿意给你处理，无需配置）

原理：

代理实际上指的就是代理服务器，英文叫作proxy server，它的功能是代理网络用户去取得网络信息。形象地说，它是网络信息的中转站。在我们正常请求一个网站时，是发送了请求给Web服务器，Web服务器把响应传回给我们。如果设置了代理服务器，实际上就是在本机和服务器之间搭建了一个桥，此时本机不是直接向Web服务器发起请求，而是向代理服务器发出请求，请求会发送给代理服务器，然后由代理服务器再发送给Web服务器，接着由代理服务器再把Web服务器返回的响应转发给本机。这样我们同样可以正常访问网页，但这个过程中Web服务器识别出的真实IP就不再是我们本机的IP了，就成功实现了IP伪装，这就是代理的基本原理。

20.说说内存泄漏的理解？内存泄露的几种情况

答案