输入URL到显示页面的全过程

输入 URL → DNS 解析 → TCP 三次握手 → 发送 HTTP 请求 → 服务器处理响应 →  
浏览器解析 → 构建 DOM/CSSOM → 合成渲染树 → 布局与绘制 → TCP 四次挥手  

DNS解析

流程

1. 浏览器缓存 → 操作系统缓存 → hosts文件 → 本地DNS服务器（通常由ISP提供，但是也不限于） → 若未命中：根域名服务器（知道.com的地址） → 顶级域名服务器（知道example.com的地址） → 权威域名服务器（知道www.excample.com的地址），最终获取IP地址。本地服务器会将获取的IP地址返回到客户端并且缓存。所有的DNS记录都包含生存时间TTL，来决定缓存的有效期。
2. 客户端向Local DNS发起的是递归查询，而Local DNS向其他服务器发起的是迭代查询。
3. DNS预解析：通过提前解析关键域名，加速后续请求。

TCP三次握手（传输层）

核心作用

确认双方收发能力，防止历史连接干扰（如过期SYN报文）。

三次步骤

客户端发送 SYN=1 + Seq=X → 服务器返回 SYN=1 + ACK=X+1 + Seq=Y → 客户端确认 ACK=Y+1。

比喻

客户端：”我要连你”（SYN） → 服务器：”收到，同意连接”（SYN-ACK） → 客户端：”好的，开始传数据”（ACK）。

HTTP请求与缓存策略（应用层）

请求阶段

1. 强缓存：通过 HTTP 响应头（Cache-Control属性（秒）> Expires 属性（绝对时间））检查缓存是否在有效期，如果缓存资源有效，无需请求服务器。
2. 协商缓存：当强缓存未命中时，通过向服务器验证资源是否过期（ETag（哈希） > Last-Modified（时间戳）），决定是否使用缓存。如果服务器告知资源未改变（304 Not Modified），则浏览器从缓存中读取资源；如果服务器告知资源已改变，则浏览器会下载新资源并更新缓存（200 OK）。

强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。

不同版本的HTTP（写的比较简略）

1.0 非持久（在1.1优化）、头部没压缩（在2.0优化）、重复传输冗余字段（在2.0优化）

1.1 持久、但是头部还是没压缩、队头阻塞

2.0 多路复用（流标识符）、服务器推送、HPACK头部压缩（一静一动表）

3.0 QUIC解决TCP层面的队头阻塞抗丢包、QPACK头部压缩

HTTP 与 HTTPS 的区别

1. 安全性：HTTPS 数据通过加密传输，防止被窃听或篡改
2. 端口：HTTP 默认端口 80，HTTPS 默认端口 443
3. 证书：HTTPS 需要数字证书，验证服务器身份；HTTP 无需证书
4. 性能：HTTPS 因加密过程略慢于 HTTP

混合加密机制：

1. 访问网站时，浏览器先用非对称加密和服务器协商密钥，再用对称加密传输网页内容
2. 非对称加密：用于握手阶段交换密钥（一对密钥（公钥+私钥）加密和解密，公钥公开，私钥保密，如 RSA 算法），两把密钥中任何一把若对数据进行加密，自己这把密钥是解不开的。客户端用服务端公钥加密会话密钥，
3. 对称加密：后续数据传输使用对称密钥（加密和解密使用同一个密钥，如 AES），加密速度快

浏览器解析与渲染（关键步骤）

1. 构建DOM树

   解析HTML文档，生成树状结构（自动补全未闭合标签）。

2. 构建CSSOM树

   解析CSS生成样式规则树，阻塞渲染直到CSSOM完成。

3. 合成渲染树

   合并DOM与CSSOM为渲染树，过滤不可见节点（如 display: none）。

4. 布局与绘制

   布局（Layout）：计算节点位置与尺寸。

   绘制（Painting）：将渲染树的内容绘制到屏幕。

JS阻塞

默认阻塞DOM解析，可通过 async（异步加载执行）或 defer（延迟执行）优化。

• async 是“下载完就执行”。
• defer 是“页面渲染完再执行”。
• 所以，如果脚本无依赖关系，用 async 比较合适。 如果脚本需要在文档完全加载后运行，比如初始化脚本，用 defer 更合适。
• 如果没有 defer 或 async 时，脚本加载和执行会完全阻塞 HTML 解析，影响页面加载速度

TCP四次挥手（传输层）

流程

1. 客户端发送 FIN=1 → 服务器返回 ACK → 服务器发送 FIN=1 → 客户端确认 ACK。

核心逻辑

1. TIME_WAIT状态：客户端等待 2MSL（约60秒），确保服务器收到最终确认，防止残留报文干扰新连接。

OSI七层模型映射

流程步骤	对应OSI层	核心协议/技术
DNS解析	应用层	DNS（UDP）
HTTP请求/响应	应用层	HTTP/HTTPS
TCP握手/挥手	传输层	TCP
IP寻址	网络层	IP、ICMP、ARP
数据帧传输	数据链路层	以太网、Wi-Fi
物理信号传输	物理层	光纤、电缆

高频优化点

1. 关键渲染路径优化：内联关键CSS、延迟非关键JS、预加载关键资源。
2. TCP性能：复用连接（HTTP/2多路复用）、减少握手次数（Keep-Alive）。
3. 缓存策略：合理设置 Cache-Control 和 ETag，减少重复请求。

总结回答模板

从输入URL到页面渲染主要经历：

1. DNS解析（首先检查本地缓存，如浏览器缓存、操作系统缓存及hosts文件；若未命中，则进行递归查询获取服务器IP地址）；
2. TCP三次握手建立客户端与服务器之间的可靠连接；
3. HTTP请求（在此阶段会检查强缓存和协商缓存以决定是否直接使用缓存响应还是向服务器发起请求）与响应；
4. 浏览器解析接收到的HTML、CSS和JavaScript，生成DOM和CSSOM树，进一步合成渲染树，完成布局计算并进行绘制操作；
5. TCP四次挥手确保双方都能安全地关闭连接。

优化重点包括：

• 减少DNS查询时间，比如通过DNS预取技术和使用更高效的DNS服务；
• 复用TCP连接，例如利用HTTP/2的多路复用功能和启用Keep-Alive来减少重复握手的开销；
• 精细化管理缓存策略，合理设置Cache-Control和ETag头部信息，减少不必要的网络请求；
• 关键渲染路径优化，比如内联关键CSS、延迟加载非关键JS以及预加载关键资源，确保页面能够快速首次展示。