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

问题

从浏览器输入网址到看到页面，中间经历了哪些步骤？

解答

整个过程可以分为 6 个阶段：DNS 解析、TCP 连接、HTTP 请求、服务器响应、页面渲染、连接结束。

DNS 解析

DNS 解析是将域名转换为 IP 地址的过程。比如输入 www.baidu.com，需要找到对应的 IP 地址才能访问服务器。

解析过程是递归的，查找顺序如下：

1. 本地域名服务器
2. 根域名服务器（.）
3. 顶级域名服务器（.com）
4. 权威域名服务器（google.com）
5. 最终找到主机（www.google.com）

找到后会缓存到本地，下次直接使用。

DNS 优化方式：

DNS 存在多级缓存，按距离浏览器从近到远排序：浏览器缓存 → 系统缓存 → 路由器缓存 → ISP 服务器缓存 → 根域名服务器缓存 → 顶级域名服务器缓存 → 主域名服务器缓存。

DNS 负载均衡可以根据服务器负载、地理位置等因素，返回最合适的服务器 IP。

TCP 三次握手

建立可靠的 TCP 连接需要三次握手：

1. 第一次握手：客户端发送 SYN 包（Seq=x），进入 SYN_SEND 状态
2. 第二次握手：服务器收到后，发送 SYN+ACK 包（Seq=y, ack=x+1），进入 SYN_RECV 状态
3. 第三次握手：客户端发送 ACK 包（ack=y+1），双方进入 ESTABLISHED 状态

握手完成后才开始传输数据。

发送 HTTP 请求

构建 HTTP 请求报文，通过 TCP 协议发送到服务器指定端口。

请求报文包含三部分：

• 请求行（方法、URL、协议版本）
• 请求头（Host、User-Agent、Cookie 等）
• 请求体（POST 数据等）

服务器处理并返回响应

服务器（如 Nginx、Apache、Tomcat）解析 HTTP 请求，处理业务逻辑后返回 HTTP 响应。

响应报文包含三部分：

• 状态行（协议版本、状态码、状态描述）
• 响应头（Content-Type、Set-Cookie 等）
• 响应体（HTML、JSON 等数据）

浏览器解析渲染页面

浏览器（以 Webkit 为例）的渲染流程：

1. 解析 HTML 生成 DOM 树
2. 解析 CSS 生成 CSSOM 树
3. 合并 DOM 树和 CSSOM 树生成渲染树
4. 布局计算元素位置和大小
5. 绘制页面到屏幕

TCP 四次挥手

数据传输完成后，需要四次挥手断开连接（假设客户端主动关闭）：

1. 第一次挥手：客户端发送 FIN 包（seq=u），进入 FIN-WAIT-1 状态
2. 第二次挥手：服务器发送 ACK 包（ack=u+1），进入 CLOSE-WAIT 状态；客户端进入 FIN-WAIT-2 状态
3. 第三次挥手：服务器发送 FIN 包（seq=w），进入 LAST-ACK 状态
4. 第四次挥手：客户端发送 ACK 包（ack=w+1），进入 TIME-WAIT 状态，等待 2*MSL 后进入 CLOSED 状态；服务器收到 ACK 后直接进入 CLOSED 状态

关键点

• DNS 解析是递归查找过程，通过多级缓存和负载均衡优化性能
• TCP 三次握手建立连接，四次挥手断开连接，保证数据传输可靠性
• HTTP 请求和响应都包含三部分：行、头、体
• 浏览器渲染分为解析 HTML/CSS、构建渲染树、布局和绘制四个阶段
• TIME-WAIT 状态需要等待 2*MSL，确保服务器收到最后的 ACK 包