Css 即使帧'；s任务为8ms

我在玩谷歌的开发者工具时间表。我有一个动画：

&来自我的机器的时间线：

（我使用的是Chrome 47），尽管所有任务所需的时间都是8毫秒，但整个帧是26毫秒，所以60帧的帧数是不符合要求的，我有一个垃圾：

---

你知道为什么吗？

你有jank，因为你有一个巨大的层在每一帧上重新绘制。它几乎有12000像素长。你需要找到一种方法来减少这种情况

若要解决此问题，请启用“绘制”分析并禁用其余部分。然后快速运行2-3秒的配置文件。由于帧太大，计算数据需要一些时间

一旦出现，点击框架并检查图层面板。这显示了一个巨大的框架，这是一个很好的指标，绘画正在发生

另一个缺点是，您有成吨的

.box

div，所有带有

的div都将更改。这正是will change是如何而不是被使用的。并不是所有这些部门都在变化。因此，你给引擎带来了大量噪音，它做的工作比需要的多得多。绝对具体地说明将要更改的内容适用于什么以及更改的目的。你也在告诉它你正在用一个变换来改变它，这是永远不会发生的。因此，如果引擎在产生噪音的情况下做任何事情，它根本没有帮助

根据您的更改，背景色也会导致。您应该避免修改它，而是寻找其他方法（如修改元素的不透明度或两个元素之间的不透明度）以获得相同的结果


tl；博士
1） 避免巨大的层次。它们非常昂贵

2） 避免使用大量未编号的层（如所有这些
.box
div。）

3） 仅针对实际更改的元素使用
将更改

4） 提供将改变正在改变的适当的东西。因此，发动机尽其所能工作

5） 尽量避免修改背景色。
如果没有演示，我不知道如何回答这个问题。好了，我已经更新了问题。然而我认为这更多的是关于如何渲染帧和截图就足够了。这只是一个在线课程的练习代码。谢谢你的回答！但有一个问题：为什么在我的时间轴中（例如26毫秒帧），大部分时间是“空闲的”（只有8毫秒是真正的工作）？我的意思是，它没有暗示任何一个或其他操作都很耗时。我还玩弄了不透明度。这里有两个版本（背景颜色和不透明度变化的动画）。当查看时间轴时，我看不到任何差异，这两个触发布局和绘制：&。我还是做错了吗？你不只是附加不透明度的改变。您仍然会因元素的背景颜色更改而导致重新绘制。您可以直接堆叠两个元素。白色的上面是灰色的。然后将灰色不透明度设置为0，并将其更改为1。删除不透明度部分，这应该是刚刚好。它在16ms范围内。啊，我误读了设置（试图在一切进行时通过“元素”面板进行设置。）是的，很好。您处于性能边界。优化了一点。在每个循环中执行较少的逻辑，将在框上更改。除此之外，你不会变得更好。这并不是从我所知道的触发布局，只是重新绘制样式（从切换），然后重新绘制（从不透明度更改）