javascript - javascript CPU 使用率过高 - 如何调试？

Question

查找 javascript cpu 使用率高的原因的最佳方法是什么？

我有一个脚本，可以简单地从缩略图库中加载 flickr 中的照片。它们加载后，什么也不做(等待您单击它们以显示在灯箱中)，但 cpu 使用率仍然是 25% 或更多。

我打开了 Firebug，单击了个人资料，稍等了一下，然后再次单击了它，但它显示“没有要报告的事件”。如果有什么事情的话，不是会报告吗？或者我使用这个工具错了？

我在加载所有内容后执行此操作，只是为了看看可能导致 CPU 使用率过高的原因。

谢谢， 韦斯利

编辑:似乎已经追踪到它的起源了..它与 JS 无关，而是与 CSS 相关!到底是什么？

问题是这样的:

我有一个缩略图库，在加载图像时显示加载指示器而不是缩略图:

.thumbnail img {
   display:block;
   background-image: url("/images/ajax-loader.gif");
   background-position: center center; 
   background-repeat:no-repeat;
   overflow:hidden;
   color:white;
}

如果我删除此代码，CPU 使用率会下降到 0.03% 或其他...而不是 20%...这是因为仍在播放的 gif 动画，但只是被覆盖了？

我不知道 gif 动画会占用 CPU 这么多资源？诚然，这样的事情已经发生了 20 多次，但仍然如此。在 safari/chrome 中也是如此。

我想我应该要么不使用每个图像内部的加载指示器，要么在成功加载图像时删除背景图像..

Answer 1

过去几周我使用了该工具 "dynaTrace AJAX Edition" (免费工具)用于分析网站(不仅仅是 JavaScript)。它有一些非常好的 View 来显示资源的使用情况。尝试找出导致 cpu 使用率高的 javascript 部分(或浏览器的其他部分)。然而，该工具仅适用于 Firefox 和当前的 Internet Explorer 实现，但是当您使用 Firebug 时，这似乎表明您正在使用 Firefox。

他们的论坛页面上有一个名为 "What else can impact Browser CPU Usage and AJAX Performance?" 的条目这提供了更多可能有帮助的提示。