前端面试题---2022

*集大成之面试题，我们不做面试题的创作者，只做面试题的搬运工（侵必删）

〇 理论

一个完整的URL 解析过程

1 用户输入 URL 地址。
2 对 URL 地址进行 DNS 域名解获得IP地址。
3 建立 TCP 连接（三次握手）。
4 浏览器向 web 服务器发送一个 HTTP 请求报文。
5 服务器返回 HTTP 响应报文给客户端。
6 关闭 TCP 连接（四次挥手）。
7 浏览器解析文档资源并渲染页面。
解析过程：浏览器解析的资源（html，svg,Xhtml等），解析完成后都会生成一个完整的DOM Tree ，css资源则会解析成CSS Rule Tree，生成之后进行浏览器渲染，保证脚本执行前已完成DOM渲染会放在body标签结束之后。

EventLoop是什么

• Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理，是一个程序结构，用于等待和发送消息和事件。

1. 主要的宏任务有：

   setTimeout
   setInterval
   setImmedate
   MessageChannel
   requestAnimationFrame
   I/O
   UI交互事件

2. 微任务有：
   console.log()
   Promise.then
   MutationObserver
   Object.observe
   process.nextTick

执行过程： 事件循环的顺序，决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环（即宏任务）。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局)，然后执行所有的micro-task（微任务）。当所有可执行的micro-task（微任务）执行完毕之后。循环再次从macro-task（宏任务）开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task（微任务），这样一直循环下去

HTTP和HTTPS

什么是HTTP和HTTPS

• HTTP ：超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

• HTTPS ：是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。
  PS:TLS是传输层加密协议，前身是SSL协议，由网景公司1995年发布，有时候两者不区分。

区别

1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

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

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

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

https加密方式

1. 共享密钥加密（对称密钥加密）：客户端和服务器公用一个密匙用来对消息加解密，这种方式称为对称加密。客户端和服务器约定好一个加密的密匙。客户端在发消息前用该密匙对消息加密，发送给服务器后，服务器再用该密匙进行解密拿到消息

2. 公开密钥加密（非对称密钥加密）：客户端和服务端均拥有一个公有密匙和一个私有密匙。公有密匙可以对外暴露，而私有密匙只有自己可见。使用公有密匙加密的消息，只有对应的私有密匙才能解开。反过来，使用私有密匙加密的消息，只有公有密匙才能解开。这样客户端在发送消息前，先用服务器的公匙对消息进行加密，服务器收到后再用自己的私匙进行解密。

3. 数字证书
   由数字证书认证机构（CA，certificate authority）和其相关机构颁发的公开密钥证书。

而https使用的是对称加密+非对称加密，使用非对称加密传输一个对称密钥K，让服务器和客户端都得知。然后两边都使用这个对称密钥K来加密解密收发数据。因为传输密钥K是用非对称加密方式，很难破解比较安全。而具体传输数据则是用对称加密方式

强缓存和协商缓存

1. 强缓存（本地缓存）：
   直接使用使用本地缓存，不用跟服务器进行通信
   header:Expires/Cache-Control
   状态码为：200
2. 协商缓存
   将资源一些相关信息返回服务器，让服务器判断浏览器是否能直接使用本地缓存，整个过程至少与服务器通信一次
   header:Last-Modified/Etag
   状态码为：304

用户的行为对缓存的影响

用户操作

Expires/Cache-Control (强缓存)

Last-Modified/Etag(协商缓存)

地址栏回车

有效

有效

页面链接跳转

有效

有效

新开窗口

有效

有效

前进后退

有效

有效

F5刷新

无效

有效

Ctrl+F5强制刷新

无效

无效

什么是 MVVM？

• M(模型)：模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

• V(视图)：就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

• VM(视图模型)：视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Vue数据双向绑定原理

Vue2.X的双向绑定响应式原理

什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。
Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，每个声明的属性，都会有一个 专属的依赖收集器 subs，当页面使用到 某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被 放到 属性的依赖收集器 subs 中，在 数据变化时，通知更新；
当数据改变的时候，会触发Object.defineProperty - set函数，数据会遍历自己的 依赖收集器 subs，逐个通知 watcher，视图开始更新；

Vue3.x双向绑定响应式数据原理

Vue3.x改用Proxy替代Object.defineProperty。
因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

Vue3 里为什么要用 Proxy API替代 defineProperty API？

1. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
   Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
2. Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
   Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
3. 响应式是惰性的。
   在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
   在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

什么是虚拟DOM

virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。
目的是为了减少回流和重绘，提升性能。
虚拟DOM基本步骤

1. 页面初始加载解析DOM树，将DOM解析为JS对象
   [最终还需要将其映射成真实DOM，渲染到页面]

2. DOM结构要发生变化，生成一个新的JS对象

3. DIFF比较，比较同级对象

4. 将不同之处写入到patch对象中

5. 渲染到页面

那么为什么用虚拟dom呢？

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

大白话：就是为了提高代码效率，渲染效果，就如往常的js jquery这些使用dom操作时都是一段复杂的过程，整个过程要遍历属性，标签啦，就是在你的代码上一遍遍寻找大半天还不知道有没有收获，很慢。而且做多件事情的时候只能一件件去做，浪费很多时间，而我们的虚拟dom呢，就是，把你想要做的事情都用小本子记起来（记在本地js对象上）在虚拟dom上更新完成后，再拿到真是的dom上去渲染，然后交给浏览器绘制页面呀。从头到末尾，人家知道每一步要做什么，而且可以同时做，还不会等到你的页面渲染完成后才出发，人家可是早早出发了，

真实DOM和虚拟DOM的区别

那么说回到真实DOM，虚拟DOM和真实DOM又有什么区别呢？
我想，应该会有一下几点