javascript 的 CPU 使用率高 - 如何调试？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6799534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
High CPU usage of javascript - How to debug?
提问by Wesley
What is the best way to find the cause of high cpu usage of javascript?
找到javascript高cpu使用率原因的最佳方法是什么？
I have a script that simply loads photos from flickr in a thumbnail gallery. After they're loaded, nothing is being done (waiting for you to click them to display in a lightbox), but the cpu usage is still 25% or more.
我有一个脚本，它只是在缩略图库中从 flickr 加载照片。加载后，什么也没做（等待您单击它们以显示在灯箱中），但 cpu 使用率仍为 25% 或更多。
I've opened firebug, clicked profile, waited a bit then clicked it again, but it says "No activity to report". If there was something going on, wouldn't it report? Or am I using this tool wrong?
我打开了萤火虫，单击了个人资料，稍等片刻，然后再次单击它，但它显示“没有活动可报告”。如果有什么事情发生，它不会报告吗？还是我用错了这个工具？
I am doing this after everything is loaded, just to see what might be causing that high cpu usage.
我在加载所有内容后执行此操作，只是为了查看可能导致高 cpu 使用率的原因。
Thanks, Wesley
谢谢，韦斯利
Edit: Seem to have traced it's origin.. It's not anything JS related, but CSS! WHAT THE HELL?
编辑：似乎已经追踪到它的起源..它与 JS 无关，而是 CSS！搞什么鬼？
The issue is this:
问题是这样的：
I have a thumbnail gallery, I display a loading indicator instead of the thumbnail whilst the image is loading:
我有一个缩略图库，我在加载图像时显示加载指示器而不是缩略图：
.thumbnail img {
display:block;
background-image: url("/images/ajax-loader.gif");
background-position: center center;
background-repeat:no-repeat;
overflow:hidden;
color:white;
}
If I remove this code, the cpu usage drops to 0,03% or something.. instead of 20%... Is this because of the animated gif that is still playing, but just covered up?
如果我删除此代码，cpu 使用率会下降到 0.03% 或什么......而不是 20%......这是因为动画 gif 仍在播放，但只是被掩盖了吗？
I did not know that animated gifs take this much from the cpu? Granted, it's doing that more than 20 times, but still. It was the same in safari/chrome as well.
我不知道 gif 动画从 CPU 中占用了这么多？当然，它这样做了 20 多次，但仍然如此。在 safari/chrome 中也是如此。
I guess I should either not use the loading indicator thing inside of each image, or remove the background-image on a successful load of the image..
我想我不应该在每个图像中使用加载指示符，或者在成功加载图像时删除背景图像。
采纳答案by mliebelt
I have used over the last weeks the tool "dynaTrace AJAX Edition"(free tool) for analyzing web sites (not only JavaScript). It has some pretty good views that show the usage of resources. Give it a try to track down the part of the javascript (or other parts of the browser) that are the reason for high cpu usage. However the tool is only working with firefox and current internet explorer implementations, but when you use firebug, that seems to indicate that you are using firefox.
在过去的几周里，我使用了工具“dynaTrace AJAX Edition”（免费工具）来分析网站（不仅仅是 JavaScript）。它有一些非常好的视图来显示资源的使用情况。尝试追踪导致 CPU 使用率高的 javascript 部分（或浏览器的其他部分）。然而，该工具仅适用于 firefox 和当前的 Internet Explorer 实现，但是当您使用 firebug 时，这似乎表明您正在使用 firefox。
There is an entry on their forums page named "What else can impact Browser CPU Usage and AJAX Performance?"which gives some more hints that may help.
他们的论坛页面上有一个条目，名为“还有什么会影响浏览器 CPU 使用率和 AJAX 性能？” 这提供了一些可能有帮助的提示。
回答by TMS
Try to reload the page after enabling FireBug profile feature.
启用 FireBug 配置文件功能后尝试重新加载页面。
I heavilly used FireBug profile feature to do this. You can see which function is consuming most of the time. Great thing. Try this on other pages with simple javascript example. It should work well. If it doesn't work in your example, just post them a bug.
我大量使用 FireBug 配置文件功能来执行此操作。您可以看到哪个函数占用的时间最多。好东西。使用简单的 javascript 示例在其他页面上尝试此操作。它应该工作得很好。如果它在您的示例中不起作用，只需发布一个错误即可。
回答by jmelero
You could try Chrome/Chromium Developer Tools ? Profiler, Start, reload the page, wait a few minutes and stop it. It would be enough data to have a clue of what could be the problem.
你可以试试 Chrome/Chromium 开发者工具吗？Profiler，启动，重新加载页面，等待几分钟然后停止。这将是足够的数据来了解可能是什么问题。
Another common issue with high cpu usage on browsers it's css animations, (as well as gif images). I've been stuck with a high cpu usage issue when developing a web application, it was weird that it only happened when the tab was active/visible, but when on background it didn't, and the problem were present on FF, Chrome and Chromium. Finally it turned to be animated Bootstrap Progress bar.
浏览器上 CPU 使用率高的另一个常见问题是 css 动画（以及 gif 图像）。在开发 Web 应用程序时，我一直遇到 CPU 使用率高的问题，奇怪的是它只在选项卡处于活动状态/可见时发生，但在后台时却没有，并且问题出现在 FF、Chrome 上和铬。最后它变成了动画 Bootstrap 进度条。
You could check this easily here http://getbootstrap.com/components/#progress-animated, open it on Chrome, open Tools ? Task Manager, then Toggle animation on Bootstrap site and check cpu usage.
您可以在http://getbootstrap.com/components/#progress-animated轻松检查，在 Chrome 上打开它，打开工具？任务管理器，然后在 Bootstrap 站点上切换动画并检查 CPU 使用情况。
I guess this is not strictly an answer to the question, but a usefull tip to find the problem. Since I can't comment yet, I decided to post it as an answer as someone could find it usefull, let me know if this is such a bad practice.
我想这不是严格意义上的问题的答案，而是找到问题的有用提示。由于我还不能发表评论，我决定将其作为答案发布，因为有人可能会发现它有用，请告诉我这是否是一种糟糕的做法。
