HTTP请求与缓存、页面渲染全流程

文章目录

前言
- [**1. HTTP请求与缓存处理**](#1. HTTP请求与缓存处理)
- - **缓存机制**
  - - [• 强缓存（Cache-Control / Expires）](#• 强缓存（Cache-Control / Expires）)
    - [• 协商缓存（Last-Modified / ETag）](#• 协商缓存（Last-Modified / ETag）)
- [**2. 服务器响应与数据解析**](#2. 服务器响应与数据解析)
- [**3. HTML DOM 构建**](#3. HTML DOM 构建)
- [**4. CSSOM 构建**](#4. CSSOM 构建)
- [**5. 渲染树（Render Tree）生成**](#5. 渲染树（Render Tree）生成)
- [**6. 布局（Layout / Reflow）**](#6. 布局（Layout / Reflow）)
- [**7. 绘制（Painting）**](#7. 绘制（Painting）)
- [**8. 合成（Compositing）与显示**](#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 复制代码

<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是树状结构，决定元素的最终样式（层叠、继承、优先级）。

• 示例：

css 复制代码

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请求到最终渲染页面！ 🚀