即使框架的任务是 8 毫秒，也没有达到 60fps
60fps not met even though frame's tasks are 8ms
我正在研究 Google 的开发者工具时间表。我有一个动画：
http://output.jsbin.com/yecudotija/1
& 来自我机器的时间线：
https://www.dropbox.com/s/0opclvbvb82ff8f/TimelineRawData-20151229T130820.json?dl=0
（我正在使用 Chrome 47）即使所有任务所需的时间是 8 毫秒，整个帧是 26 毫秒 - 所以 60fps 不满足，我有一个垃圾：
知道这是为什么吗？
你有卡顿，因为你有 一个 大层每帧都被重新绘制。它几乎有 12000 像素长。你需要找到一种方法来最小化它。
要解决这个问题，请打开 "Paint" 分析并关闭其余部分。然后只需 运行 快速 2-3 秒的配置文件。 frame太大了，计算数据有点费时间
出现后，单击框架并检查图层面板。这显示了巨大的框架，这是绘画发生位置的良好指示。
另一个缺点是，您有大量 .box 个 div，全部带有 will-change。这正是 will-change NOT 的用途。并非所有这些 div 都在变化。所以你给引擎带来了一堆噪音，它做的工作比需要的多得多。绝对具体说明 will-change 的用途和用途。您还告诉它您正在使用从未发生过的转换来更改它。因此，如果引擎在产生所有噪音的情况下做任何事情，它根本没有帮助。
请注意您的改动，background-color 会导致 repaint and re-composition。您应该避免修改它，而是寻找替代方法（例如修改元素的不透明度或两个元素之间的不透明度）以获得相同的结果。
tl;博士
1) 避免大层。它们非常昂贵。
2) 避免大量不需要的层（像所有这些 .box div。）
3) 仅对实际会发生变化的元素使用 will-change。
4) 提供 will-change 正在更改的正确内容。所以引擎会尽其所能。
5) 尽量避免修改background-color.
我正在研究 Google 的开发者工具时间表。我有一个动画：
http://output.jsbin.com/yecudotija/1
& 来自我机器的时间线：
https://www.dropbox.com/s/0opclvbvb82ff8f/TimelineRawData-20151229T130820.json?dl=0
（我正在使用 Chrome 47）即使所有任务所需的时间是 8 毫秒，整个帧是 26 毫秒 - 所以 60fps 不满足，我有一个垃圾：
知道这是为什么吗？
你有卡顿，因为你有 一个 大层每帧都被重新绘制。它几乎有 12000 像素长。你需要找到一种方法来最小化它。
要解决这个问题，请打开 "Paint" 分析并关闭其余部分。然后只需 运行 快速 2-3 秒的配置文件。 frame太大了，计算数据有点费时间
出现后，单击框架并检查图层面板。这显示了巨大的框架，这是绘画发生位置的良好指示。
另一个缺点是，您有大量 .box 个 div，全部带有 will-change。这正是 will-change NOT 的用途。并非所有这些 div 都在变化。所以你给引擎带来了一堆噪音，它做的工作比需要的多得多。绝对具体说明 will-change 的用途和用途。您还告诉它您正在使用从未发生过的转换来更改它。因此，如果引擎在产生所有噪音的情况下做任何事情，它根本没有帮助。
请注意您的改动，background-color 会导致 repaint and re-composition。您应该避免修改它，而是寻找替代方法（例如修改元素的不透明度或两个元素之间的不透明度）以获得相同的结果。
tl;博士
1) 避免大层。它们非常昂贵。
2) 避免大量不需要的层（像所有这些 .box div。）
3) 仅对实际会发生变化的元素使用 will-change。
4) 提供 will-change 正在更改的正确内容。所以引擎会尽其所能。
5) 尽量避免修改background-color.