HTML 网页运行流程
从输入 URL 到页面渲染完成，深入理解浏览器的工作原理
整体流程概览
当你在浏览器地址栏输入一个 URL（如 https://www.xjinping.com）并按下回车，浏览器会经历以下关键步骤：
输入 URL
➔
DNS 解析
➔
TCP 三次握手
➔
发送 HTTP 请求
➔
服务器处理
➔
返回 HTTP 响应
➔
解析 HTML
➔
构建 DOM 树
➔
渲染页面
💡 提示：整个过程通常在毫秒级别完成，但每一步都至关重要。理解这些步骤有助于优化网页性能。
第一步：DNS 域名解析
浏览器需要将域名（如 www.xjinping.com）转换为服务器的 IP 地址。DNS（Domain Name System）就像互联网的电话簿。
DNS 解析顺序
- 浏览器缓存 — 浏览器首先检查自身缓存中是否有该域名的解析记录
- 操作系统缓存 — 检查操作系统的 DNS 缓存（如 hosts 文件）
- 路由器缓存 — 查询本地路由器的 DNS 缓存
- ISP DNS 服务器 — 向互联网服务提供商的 DNS 服务器查询
- 递归查询 — 从根域名服务器 → 顶级域名服务器（.com）→ 权威域名服务器，逐级查询
// DNS 解析过程示意
www.xjinping.com
↓ 查询根服务器
↓ 返回 .com 顶级域服务器地址
↓ 查询 .com 服务器
↓ 返回 xjinping.com 权威服务器地址
↓ 查询权威服务器
↓ 返回 IP: 47.xxx.xxx.xxx
// 最终得到服务器 IP 地址DNS
✅ 优化建议：使用
dns-prefetch 预解析可以提前完成 DNS 查询：<link rel="dns-prefetch" href="//cdn.example.com">
第二步：TCP 三次握手
获取到服务器 IP 后，浏览器需要与服务器建立 TCP 连接。TCP 使用"三次握手"来确保双方都准备好通信。
客户端 (浏览器)
— SYN →
服务器
客户端 (浏览器)
← SYN+ACK —
服务器
客户端 (浏览器)
— ACK →
服务器
| 握手阶段 | 发送方 | 内容 | 说明 |
|---|---|---|---|
| 第一次 | 客户端 | SYN=1, seq=x | 客户端请求建立连接 |
| 第二次 | 服务器 | SYN=1, ACK=1, seq=y, ack=x+1 | 服务器同意并确认 |
| 第三次 | 客户端 | ACK=1, seq=x+1, ack=y+1 | 客户端确认，连接建立 |
🔒 HTTPS 额外步骤：如果是 HTTPS 请求，TCP 握手之后还需要进行 TLS/SSL 握手，协商加密算法和交换密钥，确保数据传输安全。
第三步：HTTP 请求与响应
TCP 连接建立后，浏览器向服务器发送 HTTP 请求，服务器处理后返回响应。
HTTP 请求报文结构
GET / HTTP/1.1
Host: www.xjinping.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Accept-Language: zh-CN,zh;q=0.9
Accept-Encoding: gzip, deflate, br
Connection: keep-aliveHTTP RequestHTTP 响应报文结构
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 3842
Server: nginx/1.24
Date: Fri, 13 Mar 2026 08:00:00 GMT
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>HTTP Response常见 HTTP 状态码
| 状态码 | 含义 | 说明 |
|---|---|---|
| 200 | OK | 请求成功 |
| 301 | Moved Permanently | 永久重定向 |
| 304 | Not Modified | 资源未修改，使用缓存 |
| 404 | Not Found | 资源不存在 |
| 500 | Internal Server Error | 服务器内部错误 |
第四步：浏览器解析与渲染
浏览器收到 HTML 响应后，开始解析和渲染页面，这是最复杂的一步。
解析渲染流程
- 解析 HTML → 构建 DOM 树 — 浏览器从上到下逐行解析 HTML 标签，构建文档对象模型（DOM Tree）
- 解析 CSS → 构建 CSSOM 树 — 解析所有 CSS 样式（外部、内联、行内），构建 CSS 对象模型（CSSOM Tree）
- 合并 → 生成渲染树（Render Tree） — 将 DOM 树和 CSSOM 树合并，生成渲染树（不包含
display:none的元素） - 布局（Layout / Reflow） — 计算每个节点在屏幕上的精确位置和大小
- 绘制（Paint） — 将渲染树的各个节点绘制到屏幕上的像素
- 合成（Composite） — 将多个图层合成为最终的页面画面
HTML
➔
DOM Tree
+
CSSOM
➔
Render Tree
➔
Layout
➔
Paint
⚠ 注意：JavaScript 的加载和执行会阻塞 HTML 解析！这就是为什么建议将
<script> 标签放在 <body> 底部，或使用 async / defer 属性。
总结
| 阶段 | 关键动作 | 涉及协议/技术 |
|---|---|---|
| DNS 解析 | 域名 → IP 地址 | DNS 协议 |
| 建立连接 | 三次握手 + TLS 握手 | TCP / TLS |
| 请求响应 | 发送请求，接收 HTML | HTTP / HTTPS |
| 解析渲染 | DOM → CSSOM → Render → Paint | 浏览器引擎 |
📚 延伸阅读：了解了 HTML 运行流程后，接下来可以学习
JavaWeb 开发环境配置，
搭建自己的 Web 服务器！