我正在使用Chrome来分离应用程序中动画的瓶颈。
它显示每帧需要20多毫秒，这太慢了。但是当我展开帧以查看发生了什么时，它显示一个jQuery调用花费了20多毫秒，但实际上Recalculate Style事件需要略多于5毫秒。
我该如何找出是什么导致了延迟？我无法看到其他15ms是什么。
总事件时间：
jQuery函数内的“Recalculate Style”事件：
“Recalculate Style”之前的堆栈：
1个回答
1
除了"Recalculate Style"事件外，其他嵌套事件总计22.93ms应该紧接在其后列出。例如，下面你可以看到有一个函数调用总共需要9毫秒。紫色数字显示渲染时间，黄色数字显示脚本执行时间。
- T Nguyen
8
1你是在指第一张截图吗？如果是的话，那么就没有更多细节可供了解。相关代码在jquery-2.0.3-min.js的第5行。但由于这是一个压缩版本，所以并没有太大帮助。您可以在开发过程中切换到未压缩版本以进行更轻松的调试。 - T Nguyen
啊，那是个好点子。也许那会有所帮助。那么，jQuery函数调用本身可能需要这么长时间吗？我将使用未压缩版本来查看该函数是什么。 - Pete
60 fps 意味着它需要在不到 1/60 秒内运行。 - Pete
1当然，我明白你为什么需要它运行得那么快。我的观点只是，实际上，22毫秒在JS的正常性能范围内，所以我一点也不惊讶你看到这些数字。但有一件事情你必须考虑，那就是你正在针对特定机器进行微调优化。不能保证用户的计算机与你的一样快。个人而言，我会将重点从微小的优化转移到更大的架构变化上。也许在开始动画之前尽可能多地进行预计算？ - T Nguyen
所以我认为对于我的问题，真正的答案在你的评论中，“你是指第一张截图吗？如果是这样，那就没有更多的细节了”。Chrome工具无法深入到那个层面。 - Pete
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接