浏览器渲染机制详解（前端必懂）
作为前端工程师，理解浏览器渲染机制（Rendering Pipeline）对性能优化至关重要。浏览器从获取 HTML 到最终呈现页面，会经历多个步骤，本文将分阶段解释整个流程，并给出常见优化方案。
一、浏览器渲染流程概览
浏览器渲染大致包含以下步骤：
- 解析 HTML ➜ 构建 DOM
- 解析 CSS ➜ 构建 CSSOM
- 合并 DOM + CSSOM ➜ Render Tree
- 布局（Layout）/ 回流（Reflow）
- 绘制（Paint）
- 分层与合成（Composite Layer）
- 显示到屏幕
整个流程可以用文字版图示表示： HTML → DOM CSS → CSSOM DOM + CSSOM → Render Tree Render Tree → Layout → Paint → Composite → Display
二、DOM 构建（DOM Tree）
浏览器从网络接收 HTML 字节流后，会进行以下处理：
- 字节流解码为字符串
- 将字符串解析成 Token
- Token 再转换成 Node
- 最终构建成一棵 DOM Tree
特点：
- HTML 是自上而下、边解析边构建 DOM 的
- 遇到外链 JS（
<script src="">）可能会阻塞 DOM 构建
三、CSSOM 构建（CSS Object Model）
步骤与 DOM 类似：
- 收集所有 CSS（内联、内嵌、外链）
- 按优先级解析 CSS
- 最终生成 CSSOM 树
⚠ 外链 CSS 会阻塞渲染，因为渲染树需要 CSSOM 才能继续。
四、Render Tree（渲染树）
Render Tree 是将 DOM Tree 与 CSSOM 合并后生成的内容树，用于进行后续布局计算。
特点：
- 不可见节点不会进入渲染树（如
<head>、display: none） visibility: hidden会被绘制但不可见，因为仍占据布局空间
五、布局（Layout）/ 回流（Reflow）
布局阶段会计算每个渲染树节点的具体宽高、位置。
触发回流的常见情况：
- 修改布局属性（width、margin、padding…）
- 插入/删除 DOM
- 获取 layout 信息：
例如：
element.offsetWidth
element.getBoundingClientRect()
回流是性能成本最高的操作，需要尽量减少触发。
六、绘制（Paint）
绘制是根据布局阶段的结果，将内容实际“画”出来：
- 文本
- 边框
- 背景
- 阴影
- 图片
绘制的成本也很高。
七、分层与合成（Composite Layer）
现代浏览器会使用 GPU 对多个图层进行合成。
触发新图层的方式包括：
transform: translateZ(0);
will-change: transform;
position: fixed;
更多图层 ➜ 更复杂合成，但可减少回流/重绘。
八、优化策略（Performance Optimization）
1. 减少回流（Reflow）
- 批量 DOM 操作 → 使用
DocumentFragment - 操作前先
display: none再改样式 - 避免频繁读取布局属性
2. 减少重绘（Repaint）
- 少用昂贵 CSS：阴影 / 渐变 / 圆角
- 使用
visibility: hidden替代display: none（特定场景）
3. 使用合成层（Composite Layer）
使用仅触发合成层更新的属性，例如：
transform
opacity
它们不会触发回流或重绘。
4. 减少渲染阻塞
CSS 放 <head>
JS 使用 defer / async：
<script src="app.js" defer></script>
<script src="app.js" async></script>
九、总结
浏览器渲染流程为：
DOM Tree + CSSOM Tree → Render Tree → Layout → Paint → Composite → Display
掌握渲染机制有助于：
- 找出性能 bottleneck
- 写出更高性能的动画与交互
- 提高页面流畅度
- 优化加载速度（FCP/LCP 等指标）
