Chrome DevTools框架事件计时

Question

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

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

我怎样才能找出导致这种延迟的原因？我看不出其他15ms是什么

总活动时间:

jQuery函数中的"Recalculate Style"事件

在"重新计算风格"之前叠加

Answer 1

总共 22.93 毫秒的其他嵌套事件应在重新计算样式事件之后列出。例如，您可以在下面看到有一个函数调用，总共花费了 9 毫秒。紫色数字显示渲染时间，黄色数字显示脚本时间。

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