深入浏览器渲染管线：从 HTML 到像素
拆解浏览器从解析 HTML 到屏幕绘制的完整流程：DOM、CSSOM、渲染树、布局、绘制与合成。
理解浏览器如何把 HTML 变成屏幕上的像素，是前端性能优化的底层基础。本文带你走一遍完整的渲染管线。
五步渲染管线
浏览器渲染页面大致经历五个阶段：
- 解析（Parse）：把 HTML 解析成 DOM 树，把 CSS 解析成 CSSOM 树；
- 样式计算（Style）：结合两者，算出每个节点的最终样式；
- 布局（Layout）：计算每个元素的位置与尺寸，生成布局树；
- 绘制（Paint）：把布局树转换成绘制指令，生成图层；
- 合成（Composite）：把各图层合成并输出到屏幕。
阻塞点在哪里
- CSS 阻塞渲染：CSSOM 未就绪前，浏览器不会渲染，所以要避免过大的阻塞 CSS；
- 同步 JS 阻塞解析：
<script>会暂停 HTML 解析，除非加async/defer； - 布局与绘制开销大：频繁改变几何属性会触发回流（reflow）与重绘（repaint）。
回流 vs 重绘 vs 合成
理解三者代价差异，是优化动画与交互的关键：
| 操作 | 触发条件 | 代价 |
|---|---|---|
| 回流 | 改变布局属性（宽高、位置） | 最高 |
| 重绘 | 改变绘制属性（颜色、阴影） | 中等 |
| 合成 | 只改变 transform/opacity | 最低 |
动画应尽量只用 transform 与 opacity，让浏览器走合成线程，不打扰主线程。
关键性能启示
- 用
will-change提示浏览器提前提升图层； - 批量修改样式，避免读写交错导致强制同步布局；
- 用
requestAnimationFrame把 DOM 操作对齐到帧。
结语
渲染管线的每一个环节，都对应一类性能问题。当你遇到卡顿，先判断它发生在布局、绘制还是合成，才能对症下药。