太久没看面试题了，看之前的输入一个URL，回车之后到页面渲染的那些事，又来复习一波，把其中的碰到过的一些面试题提取出来，面向面试学习。
1. 如何减少DNS的解析时间
启动DNS预解析；浏览器在解析HTML时，遇到配置了预解析的<link rel="dns-prefetch" href="//example.com">，会发起一个异步的DNS查询，等到资源请求时，就不用再等待DNS解析。
2. HTTP和HTTPS的区别
- 安全性： HTTP是明文传输协议，数据在传输过程中不经过加密处理，容易被窃听和篡改。HTTPS通过使用
SSL/TLS协议对数据进行加密（虽然还是能被抓取），增加传输过程中的安全性。 - 默认端口： HTTP默认使用端口80进行通信。
HTTPS默认使用端口443进行通信。 - 证书要求： HTTP不需要使用证书，HTTPS使用CA签发的
SSL（Secure Sockets Layer）或TLS（Transport Layer Security）证书来验证服务器的身份，并建立连接。
3. HTTP2的特性
- 多路复用，能够在单个
TCP连接上同时传输多个请求和响应；HTTP1.1有一个可选的Pipelining技术，但它是按照顺序处理响应的，后发的请求可能被先发的请求阻塞，所以很多浏览器默认不开启。 - 首部压缩，使用HPACK算法对请求和响应头部进行压缩，减少了首部大小，节省了带宽。而在
HTTP/1.x中，每次请求都需要发送完整的头部信息，很容易造成不必要的带宽浪费。 - 服务器推送，服务端可以在发送页面
HTML，也就是客户端请求对应HTML页面时主动推送其它资源，而不用等到浏览器解析到相应位置，发起请求再响应。 - 二进制分帧，使用二进制协议对数据进行分帧传输。二进制协议更高效，减少了解析数据的开销，并提高了传输速度。
4. 强缓存和协商缓存
强缓存，只要资源未过期直接读取本地资源并返回200，通过Expires（指定资源过期的绝对时间）和Cache-Control:max-age=<seconds>两个请求头来控制，为了更精确的控制（max-age参数为请求的相对时间、减少max-age值来手动刷新），Cache-Control的优先级比Expires更高。
协商缓存，强缓存失效时，浏览器携带上一次请求返回的响应头中的缓存标记（如ETag、Last-Modified等）向服务器发起请求，查询缓存的资源是否有效；资源没更新，就返回304，通知浏览器读取本地缓存，否则返回新的内容，状态码为200；参数的优先级方面，ETag要高于Last-Modified，因为ETag有更高的唯一性，对比资源变化会更加精准。
正常情况下，都是先读取强缓存，未命中再读取协商缓存，但是有几种情况是直接读取协商缓存：
cache-control的值为must-revalidate，表示客户端必须与服务器进行确认以验证缓存的有效性，即使强缓存仍然有效。cache-control的值为no-cache，表示客户端不应直接使用缓存，而是需要与服务器验证资源的有效性。cache-control的值为max-age=0，设置资源有效时间为0，会直接发起协商缓存的请求。
5. TCP的三次握手
- 客户端发送连接请求报文段。
- 服务器收到客户端的连接请求后，如果同意建立连接，则会发送一个响应报文。
- 客户端收到服务器的响应后，对其进行确认，服务器收到这个确认后，就完成了三次握手，双方可以开始进行数据传输了。
如果第二次握手失败会怎么样
- 超时：客户端未在规定时间内收到服务器的 SYN/ACK 响应，可能是由于网络延迟、丢包或服务器未正常响应。
- 拒绝连接：服务器可能基于某些策略（如负载均衡、连接数限制等）拒绝客户端的连接请求。
- 重传：客户端可能会重新发送连接请求，尝试建立连接。
6. TCP四次挥手
- 客户端向服务器发送连接释放请求（FIN）报文段。客户端希望关闭连接，并停止发送数据。客户端进入
FIN_WAIT_1状态。 - 服务器收到连接释放请求后，发送确认（ACK）报文段作为响应，确认收到了客户端的关闭请求。服务器进入
CLOSE_WAIT状态，客户端进入FIN_WAIT_2状态。 - 服务器完成自己未发送的数据的发送后，发送连接释放请求（FIN）报文段给客户端，表示服务器也希望关闭连接。服务器进入
LAST_ACK状态。 - 客户端收到服务器的连接释放请求后，发送确认（ACK）报文段作为响应，确认收到了服务器的关闭请求。客户端进入
TIME_WAIT状态。此时，服务器等待最后一个ACK的确认。 - 在经过一段时间（通常是两倍的报文段最大生存时间，即2MSL）后，客户端关闭连接，结束
TIME_WAIT状态。最后一个ACK被发送到服务器。
在四次挥手完成后，TCP连接正式关闭，客户端和服务器都进入了CLOSED状态。
7. HTML是如何解析的
- 词法分析，加载完HTML文件之后，开始解析HTML，通过状态机拆解为不同的标记类型，比如起始标签（
<div>）、结束标签（</div>）、文本节点、自闭合标签（<img/>）。
- 词法分析，加载完HTML文件之后，开始解析HTML，通过状态机拆解为不同的标记类型，比如起始标签（
- 构建DOM树，从
<html>开始，从上到下的逐行解析生成一个树状结构的DOM树，在中间如果遇到<script>标签，会立即执行脚本（如果没有async或defer），可能会修改DOM树结构。
- 构建DOM树，从
- 处理外部资源，
<img>、<link>或<script>等标签时，会发送额外的网络请求来获取对应的资源。在整个解析过程，除了script脚本会阻塞页面解析（可以使用async或者defer），遇到外部CSS文件时，在等待下载的过程同样是会阻塞页面的（可以加载个第三方的CSS文件链接复现，可通过JS异步加载CSS文件解决）。
- 处理外部资源，
- 构建 CSSOM 树，CSSOM（CSS Object Model）是一个与
DOM树类似的结构，用于描述样式规则的层级和继承关系。
- 构建 CSSOM 树，CSSOM（CSS Object Model）是一个与
- 生成渲染树，浏览器将
DOM树和CSSOM树合并为渲染树；渲染树只包含可见的内容，不可见的内容（如display:none的元素）不会进入渲染树，但仍在DOM树中。
- 生成渲染树，浏览器将
- 布局与绘制,在HTML解析完成后，页面开始进入渲染阶段（解析、布局、绘制、合成），浏览器根据渲染树计算每个元素的几何位置和大小，将布局好的元素绘制到屏幕上，如果有动画或变换，则会通过合成阶段在GPU上处理。
8. 说下重绘和回流及优化
回流，首先浏览器遍历渲染树，计算每个可见节点在屏幕上的位置和大小等几何属性；在这个过程中，因为节点几何属性的变化，又需要对受影响节点重新计算布局，同时回流的时候必定会触发重绘，所以频繁回流会占用大量的资源来进行布局计算。
重绘，在布局完成之后，按照渲染树的顺序，逐个绘制节点，包括颜色、边框、渲染背景、文字、图像等内容。
9. 为什么transform不会触发回流
因为transform是完全独立于文档流的布局计；当对某个元素应用transform时，浏览器会给这个元素生成一个单独的图层，这些独立的图层在GPU中进行操作，从而避免影响其他元素的渲染。
10. async和defer的区别
async：脚本下载完成后立即执行，且不会等待页面的其他内容渲染，可能导致脚本执行顺序不确定。
defer：脚本会延迟执行，直到页面的 HTML 文档解析完成，且保证按照出现的顺序执行
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。