前端面试题整理四

一、浏览器页面分层

构成：结构层、表示层、行为层

分别是：HTML、CSS、JavaScript

作用：HTML实现页面结构、CSS完成页面的表现与风格、JavaScript实现客户端的一些功能和业务

二、Doctype作用是什么，严格模式和混杂模式的区分

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码

三、在浏览器输出url，渲染过程

1. 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2. 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
3. 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
4. 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
5. 释放 TCP连接;
6. 浏览器将该 html 文本并显示内容

获取到html、css后页面渲染流程：

1. 解析HTML，构建DOM树
2. 解析CSS，生成CSS规则树
3. 合并DOM树和CSS规则，生成render树
4. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
5. 绘制render树（paint），绘制页面像素信息

四、VUE3.0新特性

1. 性能

• 双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快
• 重写了 Vdom ，突破了 Vdom 的性能瓶颈
• 进行了模板编译的优化
• 进行了更加高效的组件初始化

2.Tree-Shaking 的支持

支持了 tree-shaking （剪枝）：像修剪树叶一样把不需要的东西给修剪掉，使 Vue3 的体积更小。

需要的模块才会打入到包里，优化后的 Vue3.0 的打包体积只有原来的一半（13kb），像 keep-alive 、 transition 甚至 v-for 等功能都可以按需引入。

3.Composition API

composition-api是一个 Vue3 中新增的功能，它的灵感来自于 React Hooks ，是比 mixin 更强大的存在。

composition-api 可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。

4.Fragments

不再限制 template 只有一个根节点。
render函数也可以返回数组了，有点像 React.Fragments

5.Better TypeScript Support

更好的类型推导，使得 Vue3 把 TypeScript 支持得非常好

6.Custom Renderer API

实现用DOM的方式进行 WebGL 编程

五、服务器端渲染

定义：服务器端将组件呈现成HTML字符串，直接发送到客户端，最后混合到客户端的应用交互中。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

• 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

• 更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言，服务器端渲染 (SSR) 至关重要。

使用服务器端渲染 (SSR) 时还需要有一些权衡之处：

• 开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。

• 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。

• 更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

VUE对应技术：vue-server-renderer、nuxt

六、SSE、Long-Polling、Polling、WebSocket

• SSE：通俗解释起来就是一种基于HTTP的，以流的形式由服务端持续向客户端发送数据的技术
  优点：开发简单，和传统的http开发几乎无任何差别,客户端开发简单,有标准支持（EventSource）
  缺点：和websocket相比，只能单工通信，建立连接后，只能由服务端发往客户端，且占用一个连接，如需客户端向服务端通信，需额外打开一个连接

• Polling：这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。

• Long-Polling：长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。
  优缺点：这种技术没有明显的优缺点,如果非要说，就是需要额外的框架支持吧,且在之前服务端异步编程支持程度并不高的时候,(例如java的servlet3.0之前),后端也需要额外的框架支持

• websocket是html5规范中的一个部分，它借鉴了socket这种思想，为web应用程序客户端和服务端之间（注意是客户端服务端）提供了一种全双工通信机制。
  优点：双工通信
  缺点：需专门定义数据协议，解析数据流，且部分服务器支持不完善，后台例如java spring boot 2.1.2 仅支持websocket 1.0(最高已达1.3)

七、关于缓存

浏览器缓存：

1. 本地存储小容量
   Cookie主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器。
   LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。
   SessionStorage的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。
2. 本地存储大容量
   WebSql和IndexDB主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱。
3. 往返缓存
   又称为BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。

强制缓存：

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程

1. 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）
2. 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存
3. 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果
   缓存规则：
   当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。

协商缓存：

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

1. 协商缓存生效，返回304
2. 协商缓存失效，返回200和请求结果结果

八、事件委托、事件捕获、事件冒泡：

• 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
• 事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
• 事件捕获是先由最上一级的节点先接收事件，然后向下传播到具体的节点。

九、watch和computed的区别

1. computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化；watch支持异步
2. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed；当一个属性发生变化时，需要执行对应的操作；一对多用watch
3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。若只监听对象里某个值的变化，用watch的深度监听

十、var、let、const区别

1. let和const为块级作用域，一般为{}内部，外部无法调用会报错。var为全局作用域或函数作用域，如果提前调用会提示，有声明提前会输出undefined，不会报错。
2. let和const无法被重新定义，var可以。且const无法被修改。

十一、防抖和节流

• 防抖
  触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；
  思路：
  每次触发事件时都取消之前的延时调用方法。
• 节流
  高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
  思路：
  每次触发事件时都判断当前是否有等待执行的延时函数。

十二、HTTPS是什么

HTTPS经由[HTTP]进行通信，但利用[SSL/TLS]来加密数据包

SSL：（Secure Socket Layer，安全套接字层），位于可靠的面向连接的网络层协议和应用层协议之间的一种协议层。SSL通过互相认证、使用数字签名确保完整性、使用加密确保私密性，以实现客户端和服务器之间的安全通讯。该协议由两层组成：SSL记录协议和SSL握手协议。

TLS：(Transport Layer Security，传输层安全协议)，用于两个应用程序之间提供保密性和数据完整性。该协议由两层组成：TLS 记录协议和 TLS 握手协议。

SSL 和 TLS 是一种能够在服务器，machines 和通过网络运行的应用程序（列如，客户端连接到 web 服务器）之间提供身份认证和数据加密的加密协议。SSL是TLS的前世。多年来，新版本的发布用来解决漏洞，提供更强大支持，更安全的密码套件和算法。

常规的 HTTP 通信，有以下的问题。

窃听风险（eavesdropping）：第三方可以获知通信内容。
篡改风险（tampering）：第三方可以修改通信内容。
冒充风险（pretending）：第三方可以冒充他人身份参与通信。
因此，SSL/TLS 协议就是为了解决这三大风险而设计的，希望达到：

所有信息都是加密传播，第三方无法窃听。
具有校验机制，一旦被篡改，通信双方会立刻发现。
配备身份证书，防止身份被冒充。

十三、观察者模式和发布订阅者模式的区别

观察者模式由具体目标调度，每个被订阅的目标里面都需要有对观察者的处理，会造成代码的冗余。而发布订阅模式则统一由调度中心处理，消除了发布者和订阅者之间的依赖。

十四、虚拟DOM

真实DOM操作：真实DOM增删改 + （可能较多节点）重排与重绘
虚拟DOM操作：虚拟DOM增删改 + 真实DOM差异增删改（这与Diff算法效率有关） + （较少节点）重排与重绘

十五、v-for key的作用

key属性可以用来提升v-for渲染的效率！vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去

在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识

给key赋值的内容不能是可变的

写在最后：

本人目前技术栈一直在VUE全家桶方面，经过2021.3的面试发现，目前大厂的前端均是react生态或者node全栈，或是两者都会，侥幸收到一个还算心仪的offer。不过之后准备在node学习上投入一些精力，完善自己的技术短板。希望有幸看到的朋友们也了解一下目前的趋势。