Chrome DevTools框架事件计时

Question

我正在使用Chrome在应用的动画中隔离瓶颈。

它显示帧大约需要20 + ms，这太慢了。但是当我对框架进行详细说明以查看发生了什么时，它会向我显示一个jQuery调用需要20 + ms，但实际的Recalculate Style事件只需要5ms。

如何找出导致延迟的原因？我看不出其他15ms是什么

总活动时间：

jQuery函数中的“重新计算样式”事件

在“重新计算风格”之前叠加

Answer 1

在Recalculate Style事件之后，应该列出构成总共22.93ms的其他嵌套事件。例如，在下面您可以看到有一个函数调用总共需要9毫秒。紫色数字表示渲染时间，黄色数字表示脚本编写时间。

如果您关闭弹出窗口，您可以看到构成该呼叫的每个事件都在其下方详细说明。