Dev Tools中的缓慢光栅化

Question

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

实际绘图是不错，但那些巨大hollow green bars代表了不同的合成线程光栅化。

Here's the link

我在做什么造成这一点，我怎么能提高呢？

Answer 1

好的，我可以再现空心酒吧。

它们都发生在合成线程上，这就是为什么我们做这些空洞。你可以看得更清楚轻弹火焰图表：

然后，如果你记录的时间轴涂料选中复选框，你可以看到什么是每个内线。

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

（看起来像一个大cliprect，然后位图绘制）

但是看起来总的来说......看起来你正在每一帧重绘世界。

你可能想看看发生了什么事在每帧中......尤其是你的图层：

但是。

毕竟，看起来你可以通过动画transform:translate()而不是left/top来解决你的问题。我也建议将will-change:transform添加到这些项目。这将允许浏览器移动项目而不重绘，并且不应该在每个框架上重新渲染。

必曰：

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

干杯