FE-03-浏览器渲染原理

2026-09-29

字数统计: 2k字 | 阅读时长≈ 9分

FE-03-浏览器渲染原理

本节目标：理解浏览器从 URL 输入到页面呈现的完整流程，掌握 DOM/CSSOM/渲染树/布局/绘制/合成的各个阶段，知道如何优化。

1. 浏览器架构

现代浏览器（以 Chromium 为例）是多进程架构：

┌─────────────────────────────────────────────────┐
│                 Browser 进程                     │
│  UI、地址栏、书签、存储管理、网络请求协调        │
└─────────────────────────────────────────────────┘
        │              │             │
        ▼              ▼             ▼
┌──────────┐  ┌──────────────┐  ┌──────────────┐
│ 渲染进程 │  │  GPU 进程     │  │ 网络进程     │
│ (多个)   │  │              │  │              │
└──────────┘  └──────────────┘  └──────────────┘
        │
        ▼
┌──────────────────────────────────────────┐
│ V8 引擎、Blink 渲染、布局、绘制、合成     │
│ 每个 tab 一个渲染进程（沙箱）              │
└──────────────────────────────────────────┘

为什么多进程：

稳定性：一个 tab 崩溃不影响其他
安全性：渲染进程在沙箱里，权限受限
性能：多个 tab 可并行

为什么有时合并进程：节省内存（多 tab 共用）。

2. URL 输入到页面呈现

URL 输入
   ↓
1. 导航 (Navigation)
   ├── DNS 解析
   ├── TCP 连接 (三次握手)
   ├── TLS 握手（HTTPS）
   └── HTTP 请求 / 响应
   ↓
2. 解析 (Parsing)
   ├── 字节流 → 字符（根据 charset）
   ├── 词法分析 → Token
   ├── 语法分析 → 节点 (Node)
   └── DOM 树
   ↓
3. 样式计算 (Style Calculation)
   ├── CSS 解析 → CSSOM
   ├── 合并继承 → Computed Style
   └── 标准化属性值
   ↓
4. 布局 (Layout / Reflow)
   ├── 计算每个节点的几何信息
   │   （位置、尺寸）
   └── 布局树 (Layout Tree)
   ↓
5. 分层 (Layerization)
   ├── 提升为合成层的元素
   └── 拆成多个层
   ↓
6. 绘制 (Paint)
   ├── 绘制指令（Draw Quad）
   └── 分块（Tile）
   ↓
7. 合成 (Compositing)
   ├── GPU 线程光栅化
   ├── 合成位图
   └── 显示到屏幕

3. 关键概念

3.1 DOM（文档对象模型）

HTML 解析成的树形结构：

<html>
  <body>
    <div class="container">
      <h1>标题</h1>
      <p>段落</p>
    </div>
  </body>
</html>

Document
  └── html
        └── body
              └── div.container
                    ├── h1
                    │     └── "标题" (文本节点)
                    └── p
                          └── "段落" (文本节点)

3.2 CSSOM（CSS 对象模型）

body { color: #333; }
.container { padding: 16px; }
h1 { font-size: 2rem; }
p { line-height: 1.5; }

CSSOM 树结构（也是树形）。

3.3 渲染树（Render Tree）

DOM + CSSOM 合并 = 渲染树（只包含可见元素）：

display: none 的元素不在渲染树
visibility: hidden 的元素在渲染树（占位但不可见）
<head>, <meta>, <script> 不在渲染树

3.4 布局树（Layout Tree）

渲染树 → 布局树，包含每个节点的盒模型信息（x, y, width, height, margin, padding 等）。

4. 重排（Reflow / Layout）

布局阶段计算元素几何信息的过程。DOM 变化、样式变化、读取某些属性都可能触发重排。

触发重排的操作：

// DOM 增删改
element.appendChild(child);
element.remove();
element.style.width = '100px';

// 读取 offset/scroll/client 等属性
element.offsetHeight;  // 强制重排（如果之前有未应用的变更）
window.scrollTo(0, 100);

// 修改 CSS 类
element.classList.add('active');

// 窗口变化
window.resize();

// 字体加载完成
document.fonts.ready;

重排开销：可能影响整个文档树（或子树）。

5. 重绘（Repaint）

绘制阶段把元素绘制到屏幕。几何信息没变，只改外观。

只触发重绘（不重排）：

color, background, border-color, box-shadow
visibility: hidden（元素仍占位）
outline

触发重排 + 重绘：

width, height, margin, padding
top, left, right, bottom（定位属性）
display, position, float
font-size, font-family, line-height

只触发合成（最便宜）：

transform: translate/scale/rotate
opacity
filter
will-change: transform

6. 性能优化原则

6.1 减少重排次数

批处理 DOM 变更：

// 错：3 次重排
const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  list.appendChild(li);  // 每次都触发重排
}

// 对：1 次重排
const frag = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  frag.appendChild(li);
}
list.appendChild(frag);

离线 DOM 操作：

// 错：每次循环都触发重排
for (let i = 0; i < 1000; i++) {
  element.style.left = i + 'px';
}

// 对：脱离文档流后修改
element.style.position = 'absolute';  // 或 display: none
for (let i = 0; i < 1000; i++) {
  element.style.left = i + 'px';
}
element.style.position = '';

避免强制同步布局：

// 错：连续读 offsetHeight 触发多次重排
boxes.forEach(box => {
  box.style.width = container.offsetWidth + 'px';  // 写
  const h = box.offsetHeight;                       // 读 → 强制同步布局
});

// 对：先读后写
const width = container.offsetWidth;  // 一次读
boxes.forEach(box => {
  box.style.width = width + 'px';     // 写
});

6.2 减少重绘范围

/* 用 transform 而不是 left/top */
.box {
  position: absolute;
  /* 错：left: 100px; 触发布局 */
  transform: translateX(100px);  /* 只触发合成 */
}

/* 用 opacity 而不是 visibility */
.box {
  /* 错：visibility: hidden 时切换会重绘 */
  opacity: 0;
  pointer-events: none;
}

6.3 提升合成层

触发层提升的属性：

.layer {
  transform: translateZ(0);     /* 或 will-change: transform */
  opacity: 0.99;                /* 老浏览器 hack */
  filter: blur(0);              /* 老 hack */
  position: fixed;              /* 也会提升 */
  will-change: transform, opacity;  /* 提示浏览器 */
}

注意：不要滥用层（每个层都占显存）。一般只对动画元素用。

7. 关键渲染路径（CRP）

Critical Rendering Path：从 HTML/CSS/JS 到首次绘制（First Paint）的过程。

优化目标：缩短关键渲染路径时间。

7.1 渲染阻塞资源

<head>
  <!-- CSS 默认是 render-blocking -->
  <link rel="stylesheet" href="style.css">

  <!-- JS 默认是 parser-blocking -->
  <script src="app.js"></script>
</head>

优化方法：

<!-- 关键 CSS 内联 -->
<style>/* 首屏关键样式 */</style>

<!-- 非关键 CSS 异步 -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

<!-- JS 加 defer（异步下载，DOM 解析完执行） -->
<script defer src="app.js"></script>

<!-- JS 加 async（异步下载，下载完立即执行） -->
<script async src="analytics.js"></script>

defer vs async：

defer：按顺序执行，DOMContentLoaded 前
async：下载完就执行，顺序不保证

7.2 资源加载优先级

<!-- 高优先级：阻塞渲染的关键资源 -->
<link rel="stylesheet" href="critical.css">

<!-- 预加载：关键但稍后用 -->
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- 预取：下一页可能用 -->
<link rel="prefetch" href="/next-page.html">

<!-- 预连接：跨域资源 -->
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="//cdn.example.com">

8. 浏览器事件循环（Event Loop）

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 输出：1 4 3 2

宏任务 vs 微任务：

宏任务：setTimeout, setInterval, I/O, UI 渲染
微任务：Promise.then, queueMicrotask, MutationObserver

事件循环：

执行栈 (Call Stack)  →  同步代码
        ↓ 栈空
微任务队列 (Microtask Queue)  →  全部执行完
        ↓
宏任务队列 (Task Queue / Macrotask)  →  取出第一个
        ↓
        回到 Call Stack

requestAnimationFrame 在下一次重绘前执行（不是微任务）。

9. 实战：性能优化清单

减少 DOM 树深度
用 CSS transform/opacity 做动画
长列表用虚拟滚动（react-window、vue-virtual-scroller）
图片用 loading="lazy" + decoding="async"
CSS 放在 <head>，JS 放 <body> 末尾或用 defer
大 CSS 拆成关键路径 + 非关键（异步加载）
用 content-visibility: auto 跳过视口外内容渲染
字体用 font-display: swap 避免阻塞
避免 layout thrashing（读写交错）
用 Chrome DevTools Performance 面板分析

10. DevTools 实战

Performance 面板：

1. 录制操作
2. 看 Main 线程的 flame chart
3. 找长任务（黄色 = 脚本，紫色 = 渲染）
4. 看是否频繁重排/重绘

Layers 面板：

1
2
3

查看页面有多少合成层
每个层的大小、内存占用
找到不必要的层提升

Rendering 面板（实验性）：

1
2
3

- Paint flashing：重绘时高亮
- Layout shift regions：CLS 区域
- Frame rendering stats：FPS

小结

阶段	优化点
解析	减小 HTML/CSS 体积、关键 CSS 内联
样式	选择器高效（避免深嵌套）
布局	减少重排、批处理 DOM
绘制	减少重绘、缩小影响范围
合成	transform/opacity 动画
加载	preload/prefetch/async/defer

黄金法则：

优先 transform/opacity（合成层最快）
避免 layout thrashing（读写交错）
批处理 DOM 变更
关键资源优先，非关键资源异步
测量，不要猜（用 DevTools）

下一节讲 JavaScript 高级：闭包、原型链、异步、模块化。

本文作者： CoderSong
本文链接： https://jack-song-gif.github.io/2026/09/29/FE-03-浏览器渲染原理/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！