4

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

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

谢谢 ：）

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

4

5 回答 5

1

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

http://getfirebug.com/javascript

请参阅：分析 JavaScript 性能

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

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

通过调试器中的控制台窗口，您可以看到配置文件结果。

于 2012-10-10T18:33:27.360 回答
0

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

于 2012-10-10T20:06:52.110 回答
0

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

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

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

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

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

于 2012-10-10T20:25:02.117 回答
0

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

   console.time('someFunction timer');

   function someFunction(){ ... }

   console.timeEnd('someFunction timer');

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

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

于 2012-10-10T20:39:08.140 回答
0

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

于 2012-11-14T16:36:50.047 回答