乐闻世界logo
5月27日 21:52

Chrome 浏览器渲染流程是什么？

渲染流程六步走

Chrome 将 HTML、CSS、JavaScript 转化为屏幕像素，依次经历六个阶段：

  1. 构建 DOM 树：HTML 解析器将标签转为节点。遇到非阻塞资源（如图片）继续解析，遇到 <script> 则暂停 DOM 构建，等脚本执行完才恢复。

  2. 构建 CSSOM 树：CSS 解析器将样式规则转为 CSS 对象模型。CSS 是阻塞渲染的资源——CSSOM 未就绪前不会进行下一步。

  3. 构建渲染树：DOM 与 CSSOM 合并，只保留可见节点。<head> 及子元素、display: none 的节点不进入渲染树（visibility: hidden 仍保留，因占空间）。

  4. 布局（Layout/Reflow）：计算每个节点的位置和大小，输出盒模型。这是重排发生的阶段。

  5. 绘制（Paint）：将可见部分绘制到屏幕。样式变化不影响布局时只触发重绘，开销远小于重排。

  6. 合成（Composite）：多个图层合并为最终画面。使用 3D transform、will-change、video/canvas 的元素被提升为独立合成层，由 GPU 处理，跳过主线程的重排和重绘。

重排、重绘与直接合成

  • 重排：几何属性变化（宽高、位置、边距、字体大小），或读取 offsetWidth/scrollTop 等触发布局计算的属性
  • 重绘：外观属性变化（颜色、背景、阴影），几何未变
  • 直接合成：仅改 transform 和 opacity，跳过布局和绘制

JS 与 CSS 的阻塞关系

  • JS 阻塞 DOM 构建：遇到 <script> 暂停解析，async/defer 可改变行为
  • CSS 阻塞 JS 执行：脚本依赖样式时须等 CSSOM 构建完毕
  • GUI 渲染线程与 JS 引擎线程互斥：JS 执行期间不渲染

追问方向

  • 从输入 URL 到页面渲染完成，完整链路是什么？
  • requestAnimationFrame 在渲染流程哪一步执行？与 setTimeout 有何区别？
  • 如何用 DevTools 定位重排重绘？（Performance 面板查看 Layout/Paint 事件）
  • 合成层隐式提升机制是什么？过多合成层会导致什么问题？
标签：Chrome