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

请参阅：Profile JavaScript性能

另一个有用的工具是profile（）函数

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

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

Answer 2

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

Answer 3

要回答您的第一个问题，15页图像不应成为计算机处理的问题。谷歌最多可以加载46页图像而不会有任何滞后现象。虽然它确实阻止你在此之后加载更多。

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

console.log（“message”+ new Date（））;

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

最后，在Firebug中，转到控制台选项卡，然后在开始向下滚动页面之前单击Pofile。然后滚动到第15页，然后再次单击“配置文件”。它打破了所谓的功能和花费的时间。

Answer 4

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

   console.time('someFunction timer');

   function someFunction(){ ... }

   console.timeEnd('someFunction timer');

这不如分析器功能强大，但它应该让您了解功能需要多长时间。

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

Answer 5

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

如何跟踪慢JS或JQuery代码

5 个答案: