开发工具中的缓慢光栅化
Slow rasterization in Dev Tools
我正在使用一些相当简单的视差滚动来优化网站。动画元素位于单独的层 (backface-visibility:hidden) 上，脚本和渲染步骤看起来相当快。但是我看到很多时间花在绘画上:
实际绘图很好，但那些巨大的 hollow green bars 表示单独的合成器线程中的光栅化。
我在做什么导致了这种情况，我该如何改进它？
好的，我可以重新制作空心条。
它们发生在合成器线程上，这就是我们将它们做成空心的原因。翻到火焰图可以看得更清楚：
然后，如果您在勾选 Paint 复选框的情况下记录了时间线，您就可以准确地看到每个绘画中的内容。
然后我们可以使用滑块来缩小哪些绘制调用是这些大型绘制中最昂贵的部分：
（看起来像一个大cliprect然后绘制位图）
但从总体上看..您似乎在每一帧都在重新绘制世界。
您可能想查看每一帧中发生的事情...尤其是您的图层：
但是。
毕竟，您似乎可以通过动画 transform:translate() 而不是 left/top 来解决您的问题。我还建议将 will-change:transform 添加到这些项目中。这将允许浏览器在不重新绘制的情况下移动项目，并且您不必在每一帧上重新栅格化。
必读：
干杯
我正在使用一些相当简单的视差滚动来优化网站。动画元素位于单独的层 (backface-visibility:hidden) 上，脚本和渲染步骤看起来相当快。但是我看到很多时间花在绘画上:
实际绘图很好，但那些巨大的 hollow green bars 表示单独的合成器线程中的光栅化。
我在做什么导致了这种情况，我该如何改进它？
好的，我可以重新制作空心条。
它们发生在合成器线程上，这就是我们将它们做成空心的原因。翻到火焰图可以看得更清楚：
然后，如果您在勾选 Paint 复选框的情况下记录了时间线，您就可以准确地看到每个绘画中的内容。
然后我们可以使用滑块来缩小哪些绘制调用是这些大型绘制中最昂贵的部分：
（看起来像一个大cliprect然后绘制位图）
但从总体上看..您似乎在每一帧都在重新绘制世界。
您可能想查看每一帧中发生的事情...尤其是您的图层：
但是。
毕竟，您似乎可以通过动画 transform:translate() 而不是 left/top 来解决您的问题。我还建议将 will-change:transform 添加到这些项目中。这将允许浏览器在不重新绘制的情况下移动项目，并且您不必在每一帧上重新栅格化。
必读：
干杯