Question

找到javascript的高CPU使用率的最佳方法是什么？

我有一个脚本只需在缩略图库中加载来自flickr的照片。加载后，没有任何操作（等待您点击它们以显示在灯箱中），但CPU使用率仍然是25％或更多。

我打开了萤火虫，点击了个人资料，稍等了一下再点击它，但它说“没有活动要报告”。如果有什么事情发生，它会报告吗？或者我使用这个工具错了？

我在加载所有内容后执行此操作，只是为了查看可能导致高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）。它有一些非常好的视图，显示资源的使用。尝试跟踪jpu（或浏览器的其他部分）中导致高CPU使用率的部分。但是该工具仅适用于firefox和当前的Internet Explorer实现，但是当你使用firebug时，这似乎表明你使用的是firefox。

在他们的论坛页面上有一个名为"What else can impact Browser CPU Usage and AJAX Performance?"的条目，它提供了一些可能有用的提示。

Answer 2

尝试在启用FireBug配置文件功能后重新加载页面。

我很喜欢使用FireBug配置文件功能来执行此操作。您可以在大多数情况下查看哪些功能正在消耗。太好了。使用简单的javascript示例在其他页面上尝试此操作。它应该运作良好。如果它在您的示例中不起作用，只需向它们发布错误。

Answer 3

您可以尝试使用Chrome / Chromium开发人员工具»Profiler，启动，重新加载页面，等待几分钟然后停止。有足够的数据可以找出可能出现问题的线索。

浏览器上高cpu使用率的另一个常见问题是css动画（以及gif图像）。在开发Web应用程序时，我一直遇到高CPU使用率问题，奇怪的是它只发生在标签处于活动/可见时，但是在背景上它没有，并且问题出现在FF，Chrome上和铬。最后它变成了动画Bootstrap Progress栏。

您可以在http://getbootstrap.com/components/#progress-animated轻松查看，在Chrome上打开它，打开工具»任务管理器，然后在Bootstrap网站上切换动画并检查cpu使用情况。

我想这不是问题的严格答案，而是找到问题的有用提示。由于我还没有发表评论，我决定将其作为答案发布，因为有人可能会觉得它很有用，请告诉我这是不是很糟糕的做法。

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

3 个答案: