HTTP请求与缓存、页面渲染全流程
文章目录
- 前言
- **1. HTTP请求与缓存处理**
- **缓存机制**
- • 强缓存（Cache-Control / Expires）
- • 协商缓存（Last-Modified / ETag）
- **2. 服务器响应与数据解析**
- **3. HTML DOM 构建**
- **4. CSSOM 构建**
- **5. 渲染树（Render Tree）生成**
- **6. 布局（Layout / Reflow）**
- **7. 绘制（Painting）**
- **8. 合成（Compositing）与显示**
- **总结：从请求到渲染的完整流程**
前言
HTTP请求与缓存、页面渲染全流程
当用户在浏览器输入URL并按下回车，到页面最终渲染到屏幕上，整个过程涉及多个关键步骤：
- HTTP请求与缓存处理
- 服务器响应与数据解析
- HTML DOM 构建
- CSSOM 构建
- 渲染树（Render Tree）生成
- 布局（Layout/Reflow）
- 绘制（Painting）
- 合成（Compositing）与显示
1. HTTP请求与缓存处理
浏览器在发起HTTP请求前，会先检查缓存策略，以减少不必要的网络请求。
缓存机制
• 强缓存（Cache-Control / Expires）
• 浏览器检查Cache-Control（优先级更高）或Expires，判断资源是否过期。
• 如果未过期，直接从内存缓存（Memory Cache）或磁盘缓存（Disk Cache）读取，不发送HTTP请求。
• 示例：
```http
Cache-Control: max-age=3600 // 1小时内有效
Expires: Wed, 21 Oct 2025 07:28:00 GMT
```
• 协商缓存（Last-Modified / ETag）
• 如果强缓存失效，浏览器会向服务器发送请求，携带If-Modified-Since（基于Last-Modified）或If-None-Match（基于ETag）。
• 服务器检查资源是否变化：
◦ 304 Not Modified：资源未变，浏览器继续使用缓存。 ◦ 200 OK：资源已更新，返回新数据。
• 示例：
```http
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT
ETag: "33a64df551425fcc55e4d42a148795d9"
```
2. 服务器响应与数据解析
• 服务器返回HTTP Response，包含：
• 状态码（200 OK / 304 Not Modified / 404 Not Found）
• 响应头（Content-Type、Cache-Control等）
• 响应体（HTML、CSS、JS等）
• 浏览器解析流程：
- 解析HTML → 构建DOM树
- 解析CSS → 构建CSSOM树
- 执行JS（可能阻塞DOM/CSSOM构建）
- 合并DOM + CSSOM → 生成Render Tree（渲染树）
- 布局（Layout） → 计算元素位置
- 绘制（Paint） → 填充像素
- 合成（Composite） → 最终渲染到屏幕
3. HTML DOM 构建
• 解析HTML：
• 浏览器逐行读取HTML，遇到<script>会暂停解析，执行JS（除非async/defer）。
• 解析完成后，生成DOM树（Document Object Model）。
• DOM树结构：
<html><head><title>Page</title></head><body><div>Hello</div></body>
</html>
↓
Document
├─ <html>
│ ├─ <head>
│ │ └─ <title>Page</title>
│ └─ <body>
│ └─ <div>Hello</div>
4. CSSOM 构建
• 解析CSS：
• 浏览器解析<style>、外部.css文件，生成CSSOM（CSS Object Model）。
• CSSOM是树状结构，决定元素的最终样式（层叠、继承、优先级）。
• 示例：
body { font-size: 16px; }
div { color: red; }
↓
CSSOM
├─ body { font-size: 16px; }
└─ div { color: red; }
5. 渲染树（Render Tree）生成
• 合并DOM + CSSOM：
• 浏览器遍历DOM树，结合CSSOM，生成Render Tree（仅包含可见元素，如display: none不包含）。
• Render Tree = DOM + Computed Styles
• 示例：
Render Tree
├─ <html>
│ └─ <body>
│ └─ <div>Hello</div> (color: red, font-size: 16px)
6. 布局（Layout / Reflow）
• 计算元素位置：
• 浏览器计算每个节点的几何信息（宽、高、位置）。
• 回流（Reflow）：布局变化（如窗口大小改变、DOM修改）会触发重新计算。
• 优化：
• 避免频繁修改DOM（使用DocumentFragment）。
• 使用transform代替top/left减少回流。
7. 绘制（Painting）
• 填充像素：
• 浏览器遍历Render Tree，调用GPU绘制每个节点（颜色、边框、阴影等）。
• 重绘（Repaint）：样式变化但不影响布局（如color变化）仅触发重绘。
• 优化：
• 减少复杂选择器（如div > span + p）。
• 使用will-change提示浏览器优化绘制。
8. 合成（Compositing）与显示
• GPU合成：
• 浏览器将不同层（如position: fixed、opacity）交给GPU合成。
• 最终渲染：合成后的图像显示在屏幕上。
• 优化：
• 使用transform和opacity触发GPU加速（避免主线程计算）。
总结：从请求到渲染的完整流程
- HTTP请求 → 检查缓存（强缓存/协商缓存）。
- 服务器响应 → 返回HTML/CSS/JS。
- 解析HTML → 构建DOM树。
- 解析CSS → 构建CSSOM树。
- 合并DOM+CSSOM → 生成Render Tree。
- 布局（Layout） → 计算元素位置。
- 绘制（Painting） → 填充像素。
- 合成（Compositing） → GPU渲染到屏幕。
关键优化点
✅ 缓存：合理设置Cache-Control、ETag减少请求。
✅ 减少DOM操作：避免频繁回流/重绘。
✅ CSS优化：减少选择器复杂度，使用transform/opacity。
✅ JS优化：async/defer避免阻塞DOM解析。
这样，浏览器就能高效地从HTTP请求到最终渲染页面！ 🚀