如何跟踪慢速 JS 或 JQuery 代码答案

【问题标题】：How to trace slow JS or JQuery code如何跟踪慢速 JS 或 JQuery 代码
【发布时间】：2012-10-10 18:21:51
【问题描述】：

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

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

谢谢:)

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

【问题讨论】：

在 Chrome 中打开网站，按 F12，点击“个人资料”
听起来像是内存泄漏？除非这 800 张图片的大小都是 1 mb+？
Cory - 图片大小在 8-50KB 之间 Obrian - 可以
这些图片是如何定位的？它们是否都被完全倾倒在屏幕上并在您滚动时不断更新？您所解释的一切似乎都不是这里的确凿证据...只是一堆图像转储到 DOM 中，而您正在此页面上滚动？
你在你的 jQuery 中使用了什么样的选择器？他们可能需要优化。是否还设置了任何活动/代表？如果不看代码，很难想象问题出在哪里。不过，希望其中一些问题能引起您的思考

标签： javascript jquery performance image firebug

【解决方案1】：

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

http://getfirebug.com/javascript

请参阅：分析 JavaScript 性能

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

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

虽然调试器中的控制台窗口可以看到配置文件结果。

【讨论】：

【解决方案2】：

我用过的最好的工具是https://developers.google.com/web-toolkit/speedtracer/ for Chrome

【讨论】：

【解决方案3】：

要回答您的第一个问题，计算机处理 15 页图像应该不是问题。谷歌加载多达 46 页的图像，完全没有滞后。尽管它确实会阻止您在那之后加载更多内容。

回答你的第二个问题，有很多方法可以跟踪 JS 代码。由于您正在进行与性能相关的调试，因此我将使用带时间戳的控制台日志：

console.log("消息" + new Date());

我会在您有兴趣测量其性能的函数的开头和结尾放置一个，并通读日志以查看执行每个函数需要多长时间。您将比较时间戳以查看正在执行的多余代码以及代码执行所需的时间。

最后，在 Firebug 中，转到控制台选项卡，然后在开始向下滚动页面之前单击 Pofile。然后滚动到第 15 页，然后再次单击个人资料。它分解了调用的函数和花费的时间。

【讨论】：

【解决方案4】：

我更喜欢在 Firebug 或 Chrome 中使用定时器功能，可以这样调用：

   console.time('someFunction timer');

   function someFunction(){ ... }

   console.timeEnd('someFunction timer');

这不像分析器函数那样健壮，但它应该让您了解函数需要多长时间。

此外，如果您以 100% 的 CPU 和 3GB 内存运行，则几乎可以肯定存在内存泄漏。当加载更多页面时，您可能需要考虑删除一些初始图像。例如，在显示 5 个页面后，当用户查看第 6 个页面时，您会删除第一个页面。

【讨论】：

嗨，Jlange，我确实删除了所有不必要的代码，并且我的 ajax 图像加载器运行良好。所以必须有其他代码导致问题。调查仍在继续……

【解决方案5】：

我能够通过再次检查我的代码来解决问题。我正在通过 ajax 加载新图像，但我有一条旧代码行正在检查所有图像，即 $('img') 以用通用图像替换任何无法加载的图像。这意味着当我不断加载新图像时，这个选择器必须一次又一次地遍历整个不断增长的 dom。我更改了该代码，现在页面正在运行！感谢大家的帮助。

【讨论】：