javascript - 如何跟踪缓慢的 JS 或 JQuery 代码

Question

我创建了一个用于查看图像的网页。此页面包含一些其他我没有编写的代码。该页面在加载时加载 40 个小图像。然后用户将向下滚动，可以通过 ajax 加载包含 40 张图像的附加页面。一旦我达到 15-20 页，我注意到页面开始显着变慢。我检查了应用程序计数器，它可以达到 100% cpu，内存可以超过 3GB。然后我不可避免地会得到JQuery执行时间过长的模态，问我是否要停止执行脚本。现在我意识到一个包含多达 800 张图像的页面是一个很大的负载，但 JQuery 的问题向我表明，某些代码也可能会迭代这个越来越大的 dom 对象组。当我浏览 15 页左右时，它的速度几乎呈指数级下降。一旦达到 20 页，它就几乎无法使用了。

首先，当你有这么多图片时，是否有可能高效地运行一个页面，即使使用最少的 JS？其次，是否有推荐的方法来“跟踪”JS 并查看执行了哪些函数以帮助确定最有可能的罪魁祸首？这对我来说最重要 - 在 Firebug 中有什么好的方法吗？

谢谢:)

编辑 - 我找到了答案。我有一些旧代码用于替换无法加载通用图像的图像。这段代码使用了 Jquery 的 .each 运算符，因此在每次加载页面时迭代整个页面和每个新的 ajax 添加。我将在 CSS 中为需要检查的图像设置一个类，以便 ajax 加载的图像不受影响。

Answer 1

Firebug 和所有其他调试工具可让您分析函数。您可以看到它们运行了多长时间以及它们被调用了多少次。

http://getfirebug.com/javascript

请参阅:分析 JavaScript 性能

另一个有用的工具是 profile() 函数

console.log('Starting Profile');
console.profile();
SuspectFunction();
console.profileEnd();

通过调试器中的控制台窗口，您可以看到分析结果。