javascript - 用于发现哪个 JS/jQuery 脚本卡住页面的工具或技术

Question

用什么工具来发现哪些JS/jQuery消耗了太多资源或者陷入了死循环？

更具体地说，我对此模板有疑问:http://pages.revox.io/dashboard/latest/html/

在 Firefox 46.0.1 上打开该页面会在几分钟后卡住该页面。我无法发现哪个 JS/jQuery 导致了 Firebug 的卡住，因为它似乎是一个消耗太多资源的脚本，而不是处于一个简单的卡住永无休止的循环中(这会触发“Script XYZ is take too执行时间长”消息)

Answer 1

Ubuntu 版 Firefox 46.0 似乎内置了一个非常好的调试器。

使用系统监视器很容易看到您的页面需要相当多的内存。 如果您转到“工具”->“Web 开发人员”->“性能”并记录您的页面一段时间，那么在 Firefox 中生成调用图相当容易。 停止录制后，只需选择左侧菜单中的数据和调试框架顶部的调用树即可。 它详细列出了哪些函数占用最多的处理器时间。

在我看来，无论 Gecko 的功能是什么，它都非常昂贵。

此外，控制台还指出了一些有趣的事情:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create d3.v3.js:3:157

Use of getPreventDefault() is deprecated. Use defaultPrevented instead. html

Empty string passed to getElementById().

也许解决控制台指出的问题将有助于解决卡住问题。