Dev Tools中的慢速光栅化

Question

我正在通过一些相当简单的视差滚动来优化网站。动画元素位于不同的图层（backface-visibility:hidden）上，脚本和渲染步骤看起来相当快。但是我看到很多时间花在绘画上：

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

Here's the link

我在做什么导致这种情况以及如何改善它？

Answer 1

好的，我可以重复空心吧。

它们发生在合成器线程上，这就是我们将它们空洞化的原因。你可以更清楚地看到火焰图：

然后，如果您选中了 Paint 复选框的时间轴，则可以确切地看到每个颜料内部的内容。

然后我们可以使用滑块来缩小哪些绘制调用是这些大型涂料中最昂贵的部分：

（看起来像一个大的剪辑，然后是位图绘制）

但总体而言......似乎你在每一帧都重新塑造了世界。

您可能希望了解每个框架中发生的情况......尤其是您的图层：

但是。

毕竟，您似乎可以通过动画transform:translate()代替left / top来解决您的问题。我还建议将will-change:transform添加到这些项目中。这将允许浏览器在不重新绘制的情况下移动项目，您不必在每个帧上进行重新设置。

必读：

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

干杯