在 Chrome 开发工具时间轴中，填充的绿色矩形（代表绘制操作）和空的绿色矩形（显然也代表有关绘制操作的某些内容......）之间有什么区别？
绘画实际上是两个任务：绘制调用和光栅化。
-
绘制调用。这是您想要绘制的内容的列表，它源自应用于您的元素的 CSS。最终，有一个与 Canvas 元素没有什么不同的绘制调用列表：moveTo、lineTo、fillRect（尽管它们在 Chrome 的绘画后端 Skia 中的名称略有不同，但这是一个相似的概念。）
-
光栅化。逐步执行这些绘制调用并将实际像素填充到可以上传到 GPU 进行合成的缓冲区的过程。
那么，有了这个背景，我们就开始吧：
- The 实心绿色块是 Chrome 记录的绘制调用。这些都是在主线程上与 JavaScript、样式计算和布局一起完成的。这些绘制调用被组合在一起作为数据结构并传递到合成器线程。
- The 空的绿色块是光栅化。这些由合成器生成的工作线程处理。
从本质上讲，两者都是油漆，它们只是代表整个工作的不同子任务。如果您遇到性能问题（并且从您提供的抓取来看，您似乎受到了绘制限制），那么您可能需要检查您通过 CSS 或 JavaScript 更改的属性，并查看是否存在仅合成器的方法来实现相同的结局。CSS 触发器 http://csstriggers.com也许可以在这里提供帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
