CSS Academy · 课时

布局、绘制与合成：渲染流程

Q: 「布局、绘制与合成：渲染流程」这节课中我会学到什么？

了解浏览器的布局、绘制和合成流程，从而预测样式变化的开销。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解浏览器的布局、绘制和合成流程，从而预测样式变化的开销。

布局、绘制与合成：渲染流程 是 CoddyKit 上的免费 CSS Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

三个渲染阶段

构建渲染树后，浏览器会执行三个阶段：布局（计算元素的尺寸和位置）、绘制（用颜色、文字和图像填充像素）以及合成（组合已绘制的图层并将其显示在屏幕上）。

布局（回流）

布局会计算每个元素的几何信息，包括宽度、高度和 x/y 位置。改变会影响几何结构的属性（宽度、外边距、内边距、字体大小、定位）会触发该元素的布局，并可能触发整个子树的布局，这是开销最大的阶段。

绘制

绘制会为每个图层填充像素，包括背景、边框、文字和阴影。改变颜色、背景颜色、可见性或边框圆角会触发重绘而不会重新布局；这比布局开销低，但如果重绘区域很大，仍然会产生较高成本。

合成

合成器会使用 GPU 组合图层。只影响合成的 CSS 属性，例如变换和不透明度，可以在不触发布局或绘制的情况下进行动画。GPU 可以以 60fps 处理这些属性，仅需很少的 CPU 参与。

CSS 触发机制参考

csstriggers.com（现为浏览器端文档）记录了在每个浏览器引擎中会触发布局、绘制和/或合成的 CSS 属性。请使用它审核动画属性。对于动画属性，优先选择变换和不透明度。

布局抖动

当 JavaScript 在循环中交替读取布局属性（offsetWidth）和写入样式属性时，就会发生布局抖动。每次写入都会使布局失效；每次读取都会强制同步回流。请先批量完成所有读取，再批量完成所有写入，以避免抖动。

  <pre class="snippet">// BAD: read-write-read-write loop
elements.forEach(el => { const w = el.offsetWidth; el.style.width = w + 10 + "px"; });
// GOOD: batch reads then writes</pre>

仅由合成器处理的属性

只有当元素位于独立图层上时，transform 和 opacity 才会完全由合成器处理。为任何其他属性设置动画，即使是左侧位置或顶部位置，也会在主线程上触发布局或绘制，并可能造成卡顿。

创建 GPU 图层

当元素声明了预先改变属性、具有针对变换或不透明度的 CSS 动画、采用固定定位且附近元素参与合成，或使用三维变换时，浏览器会将其提升到独立的 GPU 图层。每个图层都会占用 GPU 内存；图层过多会造成内存压力。

避免绘制风暴

当页面的大部分区域在每一帧都重新绘制时，就会发生绘制风暴。在 Chrome DevTools 中依次打开“渲染”→“绘制闪烁”，分析并定位发生重绘的区域。将频繁动画的元素隔离到独立图层中，以限制重绘区域。

DevTools 性能面板

在 Chrome DevTools 中记录性能分析数据。火焰图会显示布局、更新图层树、绘制和合成事件。较长的布局或绘制条表示存在性能瓶颈。应将每帧耗时控制在 16 毫秒以内，以保持 60 帧/秒。

实用动画指南

在可能的情况下，使用 transform 和 opacity 制作动画。对于显示动画，请使用 clip-path 代替 width/height——在现代浏览器中，clip-path 对合成器更加友好。避免为 box-shadow 制作动画；可以改用 opacity 加上带有预渲染阴影的伪元素。

知识检查

哪两个 CSS 属性可以在不触发布局或绘制的情况下制作动画？

总结

渲染管线——布局、绘制、合成——决定了动画性能。布局的开销最高，绘制的开销适中，而仅触发合成的属性（transform、opacity）由 GPU 处理。理解这些触发条件后，您就可以构建流畅的 60 帧/秒动画，避免布局抖动或绘制风暴。

常见问题解答

「布局、绘制与合成：渲染流程」课时是免费的吗？

是的 — 「布局、绘制与合成：渲染流程」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「布局、绘制与合成：渲染流程」这节课中我会学到什么？

了解浏览器的布局、绘制和合成流程，从而预测样式变化的开销。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「布局、绘制与合成：渲染流程」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy