从输入URL到页面渲染的完整流程

当在浏览器中输入URL并回车后，整个流程可以分为网络请求和页面渲染两大阶段。下面我将详细解析这一完整过程。

一、网络请求阶段

1. URL解析

浏览器首先会对输入的URL进行解析，提取出其中的各个组成部分：

协议（如http、https）
域名（如www.baidu.com）
端口（如80、443，若未指定则使用协议默认端口）
路径（如/index.html）
查询参数（如?name=value）
锚点（如#section）

--- title: URL结构解析 --- graph LR A[完整URL] --> B[协议] A --> C[域名] A --> D[端口] A --> E[路径] A --> F[查询参数] A --> G[锚点]

2. DNS解析

浏览器需要通过域名获取服务器的IP地址，这个过程称为DNS解析：

浏览器缓存：首先检查浏览器自身的DNS缓存
操作系统缓存：若浏览器缓存未命中，则检查操作系统的DNS缓存
路由器缓存：若操作系统缓存未命中，则检查路由器的DNS缓存
ISP DNS服务器：若本地缓存都未命中，则向ISP（互联网服务提供商）的DNS服务器发送请求
根域名服务器：若ISP DNS服务器没有缓存，则向根域名服务器发起请求
顶级域名服务器：根域名服务器返回顶级域名服务器的地址
权威域名服务器：顶级域名服务器返回权威域名服务器的地址
获取IP地址：权威域名服务器返回域名对应的IP地址

--- title: DNS解析流程 --- sequenceDiagram participant B as 浏览器 participant OS as 操作系统 participant R as 路由器 participant ISP as ISP DNS服务器 participant Root as 根域名服务器 participant TLD as 顶级域名服务器 participant Auth as 权威域名服务器 B->>OS: 检查DNS缓存 alt 缓存命中 OS-->>B: 返回IP地址 else 缓存未命中 OS->>R: 检查DNS缓存 alt 缓存命中 R-->>OS: 返回IP地址 OS-->>B: 返回IP地址 else 缓存未命中 R->>ISP: DNS查询请求 alt ISP有缓存 ISP-->>R: 返回IP地址 R-->>OS: 返回IP地址 OS-->>B: 返回IP地址 else ISP无缓存 ISP->>Root: 查询请求 Root-->>ISP: 返回TLD地址 ISP->>TLD: 查询请求 TLD-->>ISP: 返回Auth地址 ISP->>Auth: 查询请求 Auth-->>ISP: 返回IP地址 ISP-->>R: 返回IP地址 R-->>OS: 返回IP地址 OS-->>B: 返回IP地址 end end end

3. 建立TCP连接

获取到服务器IP地址后，浏览器会与服务器建立TCP连接，这个过程称为三次握手：

第一次握手：浏览器向服务器发送一个SYN包，表示请求建立连接
第二次握手：服务器收到SYN包后，回复一个SYN+ACK包，表示同意建立连接
第三次握手：浏览器收到SYN+ACK包后，再发送一个ACK包，确认连接建立

--- title: TCP三次握手 --- sequenceDiagram participant B as 浏览器 participant S as 服务器 B->>S: SYN (seq=x) S->>B: SYN+ACK (seq=y, ack=x+1) B->>S: ACK (ack=y+1) Note over B,S: TCP连接建立成功

如果使用HTTPS协议，还需要进行TLS握手过程，建立安全连接。

4. 发送HTTP请求

TCP连接建立后，浏览器会向服务器发送HTTP请求。HTTP请求包括：

请求行：包含请求方法（GET、POST等）、请求路径和HTTP版本
请求头：包含浏览器信息、可接受的响应类型、Cookie等
请求体：POST请求中包含的表单数据等

--- title: HTTP请求结构 --- graph TD A[HTTP请求] --> B[请求行] A --> C[请求头] A --> D[请求体] B --> B1[请求方法] B --> B2[请求路径] B --> B3[HTTP版本] C --> C1[Host] C --> C2[User-Agent] C --> C3[Accept] C --> C4[Cookie] C --> C5[其他头字段]

5. 服务器处理请求

服务器收到HTTP请求后，会进行处理：

解析请求：解析请求行、请求头和请求体
处理请求：根据请求路径和参数，进行相应的业务逻辑处理
查询数据库：如果需要，会查询数据库获取数据
生成响应：处理完成后，生成HTTP响应

6. 返回HTTP响应

服务器将处理结果封装成HTTP响应返回给浏览器，HTTP响应包括：

状态行：包含HTTP版本、状态码和状态描述
响应头：包含服务器信息、内容类型、内容长度等
响应体：包含实际的HTML内容、JSON数据等

--- title: HTTP响应结构 --- graph TD A[HTTP响应] --> B[状态行] A --> C[响应头] A --> D[响应体] B --> B1[HTTP版本] B --> B2[状态码] B --> B3[状态描述] C --> C1[Server] C --> C2[Content-Type] C --> C3[Content-Length] C --> C4[Set-Cookie] C --> C5[其他头字段]

7. 断开TCP连接

数据传输完成后，会断开TCP连接，这个过程称为四次挥手：

第一次挥手：浏览器向服务器发送FIN包，表示请求断开连接
第二次挥手：服务器收到FIN包后，回复ACK包，表示同意断开连接
第三次挥手：服务器向浏览器发送FIN包，表示数据已发送完毕
第四次挥手：浏览器收到FIN包后，回复ACK包，确认断开连接

--- title: TCP四次挥手 --- sequenceDiagram participant B as 浏览器 participant S as 服务器 B->>S: FIN (seq=u) S->>B: ACK (ack=u+1) Note over B,S: 服务器可能仍有数据发送 S->>B: FIN (seq=w, ack=u+1) B->>S: ACK (ack=w+1) Note over B,S: TCP连接断开成功

二、页面渲染阶段

浏览器接收到HTTP响应后，开始进行页面渲染。这个过程可以分为以下几个步骤：

1. 解析HTML，构建DOM树

浏览器会从上到下解析HTML文档，将标签解析成DOM节点，构建DOM树（Document Object Model）。

--- title: DOM树构建示例 --- graph TD A[html] --> B[head] A --> C[body] B --> D[meta] B --> E[title] B --> F[link] C --> G[div] C --> H[p] G --> I[span] G --> J[a]

2. 解析CSS，构建CSSOM树

浏览器会解析CSS文件和样式标签，构建CSSOM树（CSS Object Model）。

--- title: CSSOM树构建示例 --- graph TD A[body] --> B[font-size: 16px] A --> C[div] C --> D[width: 100%] C --> E[height: 200px] A --> F[p] F --> G[color: blue] F --> H[margin: 10px]

3. 执行JavaScript

浏览器在解析HTML过程中，遇到<script>标签会暂停HTML解析，转而下载并执行JavaScript代码。执行JavaScript代码可能会修改DOM树和CSSOM树。

4. 构建渲染树

浏览器将DOM树和CSSOM树合并，构建渲染树（Render Tree）。渲染树只包含需要显示的节点和这些节点的样式信息。

--- title: 渲染树构建过程 --- graph LR A[DOM树] --> C[渲染树] B[CSSOM树] --> C C --> D[可见节点 + 样式信息]

5. 布局（Layout）

浏览器根据渲染树计算每个节点在屏幕上的确切位置和大小，这个过程称为布局或回流（Reflow）。

6. 绘制（Paint）

浏览器根据布局结果，将各个节点绘制成屏幕上的实际像素，这个过程称为绘制或重绘（Repaint）。

--- title: 页面渲染流程 --- flowchart TD A[解析HTML] --> B[构建DOM树] C[解析CSS] --> D[构建CSSOM树] E[执行JavaScript] --> F[可能修改DOM/CSSOM] B --> G[构建渲染树] D --> G F --> G G --> H[布局/回流] H --> I[绘制/重绘] I --> J[页面显示]

7. 合成（Composite）

现代浏览器为了提高性能，会将页面分为多个图层，分别进行绘制，然后由合成器线程将这些图层合并成最终图像显示在屏幕上。

三、性能优化点

了解整个流程后，我们可以识别出一些性能优化的关键点：

DNS解析优化：使用DNS预解析（<link rel="dns-prefetch" href="//example.com">）
TCP连接优化：使用HTTP/2多路复用，减少连接建立开销
HTTP请求优化：减少请求次数，使用资源合并、雪碧图等
资源加载优化：使用CDN，启用缓存，压缩资源
渲染优化：避免CSS阻塞渲染，JavaScript异步加载，减少回流和重绘

--- title: 从URL输入到页面渲染完整流程 --- flowchart TD A[输入URL] --> B[URL解析] B --> C[DNS解析] C --> D[建立TCP连接] D --> E[发送HTTP请求] E --> F[服务器处理请求] F --> G[返回HTTP响应] G --> H[断开TCP连接] H --> I[解析HTML构建DOM] I --> J[解析CSS构建CSSOM] J --> K[执行JavaScript] K --> L[构建渲染树] L --> M[布局/回流] M --> N[绘制/重绘] N --> O[合成显示]

参考文档

account_tree

思维导图

Interview AiBoxInterview AiBox — 面试搭档

不只是准备，更是实时陪练

Interview AiBox 在面试过程中提供实时屏幕提示、AI 模拟面试和智能复盘，让你每一次回答都更有信心。

免费下载 Interview AiBoxdownload 查看价格方案sell

AI 助读

一键发送到常用 AI

从输入URL到页面渲染的完整流程分为网络请求和页面渲染两大阶段。网络请求包括URL解析、DNS解析、TCP连接建立（三次握手）、HTTP请求发送、服务器处理、HTTP响应返回和TCP连接断开（四次挥手）。页面渲染包括HTML解析构建DOM树、CSS解析构建CSSOM树、JavaScript执行、渲染树构建、布局（回流）、绘制（重绘）和图层合成。整个流程涉及多个网络协议和浏览器内部机制，了解这些流程有助于前端性能优化。

智能总结

深度解读

考点定位

思路启发