即使帧的任务是8ms，也不会达到60fps

Question

我正在玩Google的开发人员工具时间表。我有一个动画：

http://output.jsbin.com/yecudotija/1

＆安培;我机器的时间表：

https://www.dropbox.com/s/0opclvbvb82ff8f/TimelineRawData-20151229T130820.json?dl=0

（我正在使用Chrome 47），即使所有任务所需的时间是8毫秒，整帧也是26毫秒 - 所以60fps不符合我的垃圾：

知道为什么会这样吗？

Answer 1

你有jank，因为每个帧都有一个大量层重绘。它长约12000像素。你需要找到一种方法来减少这种情况。

要弄明白这一点，请打开“画图”分析并关闭其余部分。然后快速运行2-3秒的配置文件。由于帧太大，计算数据需要一些时间。

一旦出现，单击框架并检查图层面板。这显示了巨大的框架，它可以很好地指示绘画的位置。

另一个缺点是，你有大量的.box div，都有will-change。这正是将要使用的 NOT 的改变。并非所有这些div都在改变。所以你给发动机带来了一堆噪音，它正在做更多的工作而不是需要。绝对具体说明改变应用于什么以及改变什么。你也告诉它你正在用一个永远不会发生的变换来改变它。因此，如果发动机正在做任何产生所有噪音的事情，那就根本没有帮助。

在您的修改注释中，背景颜色会导致repaint and re-composition。你应该避免修改它，而是找到替代方法（比如修改元素的不透明度或两个元素之间）以获得相同的结果。

TL;博士

1）避免大层。它们非常昂贵。

2）避免许多不受欢迎的层（就像所有这些.box div一样。）

3）仅针对实际会发生变化的元素使用will-change。

4）提供改变正确变化的东西。所以发动机可以做到最好的工作。

5）尽量避免修改背景颜色。