浏览器从输入网址到页面显示的过程

问题

从输入网址到看到页面，浏览器经历了哪些过程？

解答

整个过程可以分为 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 负载均衡：大型网站通过 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 状态，开始传输数据

四次挥手：

1. 客户端发送 FIN 包（seq=u），进入 FIN-WAIT-1 状态，表示不再发送数据
2. 服务器返回 ACK 包（ack=u+1），进入 CLOSE-WAIT 状态，此时处于半关闭状态
3. 服务器发送 FIN 包（seq=w），进入 LAST-ACK 状态，表示数据发送完毕
4. 客户端返回 ACK 包（ack=w+1），进入 TIME-WAIT 状态，等待 2*MSL 后进入 CLOSED 状态

发送 HTTP 请求

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

请求报文包含三部分：请求行、请求头、请求体。

服务器处理请求并返回 HTTP 报文

Web 服务器（如 Nginx、Apache、Tomcat）处理 TCP 连接，解析 HTTP 协议，封装成 HTTP Request 对象进行业务处理。

返回的 HTTP 报文包含：状态码、响应头、响应体。

浏览器解析渲染页面

浏览器渲染引擎（如 Webkit）的处理流程：

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

连接结束

页面加载完成后，如果没有持久连接需求，通过四次挥手关闭 TCP 连接。

关键点

• DNS 解析是递归查询过程，通过多级缓存提升性能
• TCP 三次握手建立连接，四次挥手断开连接，保证数据传输可靠性
• HTTP 请求和响应都包含行、头、体三部分结构
• 浏览器渲染分为构建 DOM 树、CSSOM 树、渲染树，最后布局和绘制
• DNS 负载均衡可以根据服务器状态和地理位置分配流量