URL 到页面显示的完整过程
从输入 URL 到页面渲染的每个步骤
问题
描述从浏览器输入 URL 到页面显示的完整过程，包括 DNS 解析、TCP 连接、HTTP 请求、HTML 解析和页面渲染。
解答
1. URL 解析
浏览器解析输入的 URL，提取协议、域名、端口、路径等信息。
https://www.example.com:443/path?query=1#hash
│ │ │ │ │ │
协议 域名 端口 路径 查询 哈希2. DNS 解析
将域名解析为 IP 地址，查找顺序：
浏览器缓存 → 系统缓存 → hosts 文件 → 本地 DNS 服务器 → 递归查询递归查询过程：
本地 DNS → 根 DNS → 顶级域 DNS (.com) → 权威 DNS → 返回 IP3. TCP 连接（三次握手）
客户端 服务器
│ │
│──── SYN=1, seq=x ─────→│ 第一次：客户端发起连接
│ │
│←─ SYN=1, ACK=1 ───────│ 第二次：服务器确认并发起连接
│ seq=y, ack=x+1 │
│ │
│─── ACK=1 ─────────────→│ 第三次：客户端确认
│ seq=x+1, ack=y+1 │4. TLS 握手（HTTPS）
客户端 服务器
│ │
│──── Client Hello ────────────→│ 支持的加密套件、随机数
│←─── Server Hello ─────────────│ 选择的加密套件、证书、随机数
│──── 验证证书、生成预主密钥 ───→│ 用服务器公钥加密
│←─── Finished ─────────────────│ 双方生成会话密钥5. HTTP 请求与响应
// 请求
GET /path HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
// 响应
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<!DOCTYPE html>
<html>...6. HTML 解析与 DOM 构建
// 解析过程（简化示意）
字节流 → 字符 → Token → 节点 → DOM 树
// 遇到不同资源的处理
<script> // 阻塞解析，下载并执行
<script async> // 异步下载，下载完立即执行
<script defer> // 异步下载，HTML 解析完后执行
<link> // 异步下载 CSS，但会阻塞渲染
<img> // 异步下载，不阻塞7. 渲染流程
HTML CSS
│ │
↓ ↓
DOM 树 CSSOM 树
│ │
└────────┬─────────┘
↓
Render 树
│
↓
Layout（布局/回流）
│
↓
Paint（绘制）
│
↓
Composite（合成）各阶段说明：
// Layout - 计算元素位置和大小
// 触发回流的操作：
element.offsetWidth // 读取布局属性
element.style.width // 修改几何属性
// Paint - 绘制像素
// 触发重绘的操作：
element.style.color // 修改颜色
element.style.visibility
// Composite - 合成图层
// 只触发合成的操作（性能最好）：
element.style.transform
element.style.opacity8. TCP 断开（四次挥手）
客户端 服务器
│ │
│──── FIN=1 ────────────→│ 第一次：客户端请求断开
│←─── ACK=1 ─────────────│ 第二次：服务器确认
│←─── FIN=1 ─────────────│ 第三次：服务器请求断开
│──── ACK=1 ────────────→│ 第四次：客户端确认完整流程图
输入 URL
│
↓
URL 解析
│
↓
DNS 解析 ──→ 获取 IP
│
↓
TCP 三次握手
│
↓
TLS 握手（HTTPS）
│
↓
发送 HTTP 请求
│
↓
服务器处理并返回响应
│
↓
解析 HTML → 构建 DOM
│
↓
解析 CSS → 构建 CSSOM
│
↓
合并为 Render 树
│
↓
Layout → Paint → Composite
│
↓
页面显示关键点
- DNS 解析：多级缓存（浏览器→系统→路由器→ISP），递归查询获取 IP
- TCP 三次握手：确保双方收发能力正常，建立可靠连接
- 渲染阻塞：CSS 阻塞渲染，JS 阻塞 HTML 解析（async/defer 可优化）
- 渲染流程：DOM + CSSOM → Render 树 → Layout → Paint → Composite
- 性能优化方向：DNS 预解析、TCP 复用、资源压缩、减少回流重绘、使用 transform/opacity
目录