frontend-interview-playbook

Appearance

渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite ​

机制定位 ​

渲染流水线是浏览器模块里最容易“大家都听过，但真正解释不细”的主题。很多人会说页面渲染大概是“解析 DOM、生成 CSSOM、然后回流重绘”，但一旦继续问 Layout、Paint、Raster、Composite 分别干什么，哪些修改会卡在哪一层，很多答案就开始发散。

  • 渲染流水线是浏览器模块里最容易“大家都听过，但真正解释不细”的主题。很多人会说页面渲染大概是“解析 DOM、生成 CSSOM、然后回流重绘”，但一旦继续问 Layout、Paint、Raster、Composite 分别干什么，哪些修改会卡在哪一层，很多答案就开始发散
  • 这道题决定你能不能把页面性能问题、动画优化和强制同步布局真正讲回浏览器内部
  • 它也是浏览器、CSS、Vue 调度和性能治理之间的重要连接点
  • 如果只会说“交给 GPU 加速”，但说不清具体成本落在哪个阶段，答案就会很空

参与者与职责 ​

  • 这道题决定你能不能把页面性能问题、动画优化和强制同步布局真正讲回浏览器内部
  • 它也是浏览器、CSS、Vue 调度和性能治理之间的重要连接点
  • 如果只会说“交给 GPU 加速”，但说不清具体成本落在哪个阶段，答案就会很空
  • HTML 解析生成 DOM
  • CSS 解析生成 CSSOM

关键流程 ​

  • 这道题决定你能不能把页面性能问题、动画优化和强制同步布局真正讲回浏览器内部
  • 它也是浏览器、CSS、Vue 调度和性能治理之间的重要连接点
  • 如果只会说“交给 GPU 加速”，但说不清具体成本落在哪个阶段，答案就会很空
  • HTML 解析生成 DOM
  • CSS 解析生成 CSSOM
  • 样式计算决定每个节点最终采用哪些样式

关键数据结构或调度关系 ​

  • 渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite 背后通常都有一组关键容器或调度关系，它们决定性能边界

容易误解的边界 ​

  • 没有布局结果，浏览器就无法正确知道绘制边界和命中区域
  • 图层不是默认无限存在，是否提升成层本身也有代价
  • 重排、重绘、合成不是一个层级的概念，不能压成一句“浏览器重新渲染了”
  • opacity: 0 或 transform 不自动等于“零成本”，图层提升、纹理大小和合成开销仍然存在
  • 浏览器并不是每执行一行 JavaScript 就立刻渲染，渲染机会受事件循环和主线程占用情况影响

工程后果与调试抓手 ​

  • 这道题决定你能不能把页面性能问题、动画优化和强制同步布局真正讲回浏览器内部
  • 它也是浏览器、CSS、Vue 调度和性能治理之间的重要连接点
  • 如果只会说“交给 GPU 加速”，但说不清具体成本落在哪个阶段，答案就会很空
  • HTML 解析生成 DOM
  • CSS 解析生成 CSSOM

问答设计及延伸 ​

标准回答 ​

回答 渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite 时，先说明它在 浏览器 主链中解决的核心问题，再按参与者、流程阶段、关键数据结构和边界条件展开，最后落到性能、调试或架构后果。

追问拆解 ​

  • 渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite 与“强制同步布局：layout thrashing、读写交错与调度规避”在主链中的职责分工
  • 渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite 与“重排、重绘与合成：渲染代价发生在什么阶段”在主链中的职责分工
  • 渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite 与“Vue 调度器：job queue、批量更新与 flush 顺序”在主链中的职责分工
  • 规模增大后最先暴露瓶颈的阶段
  • 行为异常时优先检查的参与者、阶段与数据结构

容易失分的点 ​

  • 只会背术语，不会解释流程顺序
  • 把机制和工程结果混成一层
  • 忽略边界条件，导致结论过度绝对

项目映射 ​

  • 结合一次真实问题说明 渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite 如何帮助你定位 bug、性能问题或更新错序
  • 补充源码阅读或调试时看到的关键数据结构位置
  • 补充它和上下游模块的连接关系

相关主题 ​