详解 浏览器渲染
Browser Rendering Pipeline
从 HTML 字节到屏幕像素 —— 深入理解浏览器将代码转化为可视化页面的六个关键步骤， 以及如何利用这些知识打造高性能 Web 应用。
什么是浏览器渲染？
浏览器渲染是将 HTML、CSS 和 JavaScript 转化为屏幕上可视化像素的过程。 这个过程涉及多个关键步骤：解析 → 构建树 → 布局 → 绘制 → 合成。 理解渲染流水线是优化 Web 性能的基础 —— 每一帧的渲染目标是在 16.6ms（60fps） 内完成，任何超出这个时间的操作都可能导致用户感知到卡顿。
渲染流水线 6 步走
解析 HTML → DOM 树
DOM Tree Construction浏览器接收 HTML 字节流，通过分词器（Tokenizer）将其转化为 Token，再构建成 DOM 节点树。遇到 <script> 标签会阻塞解析，遇到 async/defer 则异步处理。
解析 CSS → CSSOM 树
CSSOM Construction浏览器解析所有 CSS 来源（内联、外链、继承），构建 CSSOM（CSS Object Model）树。CSS 是渲染阻塞资源，解析完成前页面不会渲染。
合并 → 渲染树
Render Tree将 DOM 树和 CSSOM 树合并为渲染树（Render Tree）。只包含可见节点：display:none 的元素不包含，visibility:hidden 仍占据空间并包含在内。
布局（回流）
Layout / Reflow计算渲染树中每个节点的几何信息——位置（x, y）和尺寸（width, height）。也称为「回流」。输出盒模型信息，以视口坐标为基准。
绘制（光栅化）
Paint / Rasterization将布局信息转化为屏幕上的实际像素。浏览器创建绘制记录（Paint Records），然后光栅化线程将指令转化为位图。通常分为多层（Layers）进行。
合成（Composite）
Compositing合成器（Compositor）将各层按照正确的顺序（z-index、层叠上下文）合并为最终图像，发送到屏幕。合成是最高效的操作，因为它只移动图层而不重新布局或绘制。
关键渲染路径 可视化
关键渲染路径 (Critical Rendering Path) 指从收到 HTML 到首次渲染像素之间必须完成的所有步骤。 优化 CRP 的目标是最小化关键资源数量、最小化关键路径长度和最小化关键字节数。
回流 vs 重绘
Reflow（回流）
高开销修改了几何属性（尺寸、位置），浏览器需要重新计算布局树。
Repaint（重绘）
中开销修改了外观属性但不影响布局，浏览器只需重新绘制受影响的区域。
性能优化 实战策略
减少回流 (Reflow)
减少重绘 (Repaint)
优化关键渲染路径
合成层优化
渲染引擎 架构对比
核心要点速记
渲染流水线：HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite，六步缺一不可。
CSS 是渲染阻塞资源，JS 既阻塞解析又阻塞渲染。合理使用 async / defer / preload 解耦。
Reflow 代价最高 —— 修改几何属性触发布局重算。尽量用 transform/opacity 实现动画。
合成层 (Composite) 由 GPU 处理，是最高效的更新路径。善用 will-change 但切勿滥用。