绘制是填充像素的过程，像素最终合成到用户的屏幕上。它往往是管道中运行时间最长的任务，应尽可能避免此任务。
摘要
- 除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。
- 绘制通常是像素管道中开销最大的部分。请尽可能避免这种情况。
- 通过层的提升和动画的编排来减少绘制区域。
- 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销；应尽可能降低复杂性并减少开销。
布局和绘制是如何触发的
如果您触发布局，则总是会触发绘制，因为更改任何元素的几何属性意味着其像素需要修正！
如果更改非几何属性，例如背景、文本颜色或阴影，也可能触发绘制。在这些情况下，不需要布局，并且管道将如下所示：
使用 Chrome DevTools 快速确定绘制瓶颈
您可以使用 Chrome DevTools 来快速确定正在绘制的区域。打开“渲染”标签页，然后启用绘制闪烁。
启用此选项后，每次发生绘制时，Chrome 将让屏幕闪烁绿色。如果看到整个屏幕闪烁绿色，或看到您认为不应绘制的屏幕区域，则应当进一步研究。
提升移动或淡出的元素
绘制并非总是绘制到内存中的单个图像。事实上，在必要时浏览器可以绘制到多个图像或合成器层。
此方法的优点是，定期重绘的或通过变形在屏幕上移动的元素，可以在不影响其他元素的情况下进行处理。Sketch、GIMP 或 Photoshop 之类的艺术文件也是如此，各个层可以在彼此的上面处理并合成，以创建最终图像。
创建新层的最佳方式是使用 will-change CSS 属性，该属性在所有主要的现代浏览器引擎中都适用。使用值 transform，will-change 将创建一个新的合成器层：
.moving-element {
will-change: transform;
}
但需要注意的是：不要创建太多层，因为每层都需要内存和管理开销。有关此主题的更多信息，请参阅坚持仅合成器的属性和管理层计数部分。
如果您已将一个元素提升到一个新层，可使用 DevTools 确认这样做已给您带来性能优势。请勿在不分析的情况下提升元素。
减少绘制区域
然而有时，虽然提升元素，却仍需要绘制工作。绘制问题的一个大挑战是，浏览器将两个需要绘制的区域联合在一起，而这可能导致整个屏幕重绘。因此，举例而言，如果页面顶层有一个固定标头，而在屏幕底部还有正在绘制的元素，则整个屏幕可能最终要重绘。
减少绘制区域往往是编排您的动画和转换，使其不过多重叠，或设法避免对页面的某些部分设置动画。
简化绘制的复杂性
在谈到绘制时，一些绘制比其他绘制的开销更大。例如，绘制任何涉及模糊（例如阴影）的元素所花的时间将比（例如）绘制一个红框的时间要长。但是，对于 CSS 而言，这点并不总是很明显：background: red; 和 box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); 看起来不一定有截然不同的性能特性，但确实很不相同。
如上图所示，借助绘制分析器，您可以确定是否需要寻求其他方式来实现效果。问问自己，是否可能使用一组开销更小的样式或替代方式来实现最终结果。
您要尽可能的避免绘制的发生，特别是在动画效果中。因为每帧 10 毫秒的时间预算一般来说是不足以完成绘制工作的，尤其是在移动设备上。