重排、重绘与合成：渲染成本落在什么阶段

主题定位

性能题里最常见的误判，是把所有样式变化都归成“GPU 加速”。

• 性能题里最常见的误判，是把所有样式变化都归成“GPU 加速”
• 样式变化可能触发布局、绘制和合成中的不同阶段，代价由受影响的树和属性类型决定
• 要讨论这题，必须把它放到浏览器的 style -> layout -> paint -> composite 流水线里
• 滥用 will-change 或强行层提升会增加显存、栅格化和合成成本，移动端尤为明显

关键概念拆分

对象一

对象一 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 对象一 的差异最终会体现在 布局系统、渲染代价、样式覆盖 这几个维度。 对象一 讲清适用边界、失效条件和代价结构，结论才有技术含量。

对象二

对象二 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 对象二 的差异最终会体现在 布局系统、渲染代价、样式覆盖 这几个维度。 对象二 讲清适用边界、失效条件和代价结构，结论才有技术含量。

差异对照与适用场景

• 性能题里最常见的误判，是把所有样式变化都归成“GPU 加速”
• 样式变化可能触发布局、绘制和合成中的不同阶段，代价由受影响的树和属性类型决定
• 要讨论这题，必须把它放到浏览器的 style -> layout -> paint -> composite 流水线里
• 滥用 will-change 或强行层提升会增加显存、栅格化和合成成本，移动端尤为明显
• 会影响几何信息的属性，如尺寸、位置、字体、盒模型，可能触发 layout；layout 之后通常还会连带 paint 与 composite
• 只影响可见像素而不影响几何的属性，如 background-color，通常只触发 paint

工程建议与边界

• 性能题里最常见的误判，是把所有样式变化都归成“GPU 加速”
• 样式变化可能触发布局、绘制和合成中的不同阶段，代价由受影响的树和属性类型决定
• 要讨论这题，必须把它放到浏览器的 style -> layout -> paint -> composite 流水线里
• 滥用 will-change 或强行层提升会增加显存、栅格化和合成成本，移动端尤为明显
• 会影响几何信息的属性，如尺寸、位置、字体、盒模型，可能触发 layout；layout 之后通常还会连带 paint 与 composite

问答设计及延伸

标准回答

回答 重排、重绘与合成：渲染成本落在什么阶段 时，先定义 对象一、对象二 各自解决的问题，再比较它们在 布局系统、渲染代价、样式覆盖 上的差异，最后给出选型边界和工程代价。

追问拆解

• 重排、重绘与合成：渲染成本落在什么阶段 与“浏览器渲染流水线：DOM、CSSOM、Layout、Paint、Composite”的边界关系
• 重排、重绘与合成：渲染成本落在什么阶段 与“强制同步布局：布局抖动为什么会拖慢滚动与动画”的边界关系
• 跨标签页、跨域、多端协作场景下的结论变化
• 维护成本上升后的优先级调整

容易失分的点

• 只给“哪个好”的结论，不先拆对象
• 只报 API 或术语，不解释运行时行为和代价
• 缺少真实场景，导致结论过度绝对

项目映射

• 结合真实系统说明 对象一 到 对象二 分别落在哪段链路
• 补充未选方案的放弃原因和约束差异
• 补充线上问题、治理动作和验证结果

相关主题

• 浏览器渲染流水线：DOM、CSSOM、Layout、Paint、Composite
• 强制同步布局：布局抖动为什么会拖慢滚动与动画