javascript - 开发工具中的缓慢光栅化

Question

我正在使用一些相当简单的视差滚动来优化网站。动画元素位于不同的层上 (backface-visibility:hidden)，脚本和渲染步骤看起来相当快。然而，我看到很多时间花在绘画上:

实际绘图很好，但那些巨大的hollow green bars在单独的合成器线程中表示光栅化。

Here's the link

我在做什么导致了这种情况，我该如何改进它？

Answer 1

好的，我可以复制空心条。

它们发生在合成器线程上，这就是我们将它们做成空心的原因。翻到火焰图可以看得更清楚:

然后，如果您在选中 Paint 复选框的情况下记录了时间轴，您就可以准确地看到每个绘画中的内容。

然后我们可以使用 slider 来缩小哪些绘制调用是这些大型绘制中最昂贵的部分:

(看起来像一个大的剪贴画然后绘制位图)

但从总体上看..您似乎在每一帧都在重新绘制世界。

您可能想查看每一帧中发生的情况……尤其是图层:

然而。

毕竟，看来您可以通过动画化 transform:translate() 而不是 left/top 来解决您的问题。我还建议添加 will-change:transform到那些项目。这将允许浏览器在不重新绘制的情况下移动项目，并且您不必在每一帧上重新栅格化。

必读:

• Animations and Performance - web fundamentals
• High Performance Animations - html5rocks

干杯