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

发布于 2024-11-26 00:14:28 字数 833 浏览 2 评论 0原文

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

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

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

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

谢谢, Wesley

编辑:似乎已经追踪到它的起源了..这与 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 中也是如此。

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

What is the best way to find the cause of high cpu usage of javascript?

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.

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.

Thanks,
Wesley

Edit: Seem to have traced it's origin.. It's not anything JS related, but CSS! WHAT THE HELL?

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?

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.

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..

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

守不住的情 2024-12-03 00:14:28

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

他们的论坛页面上有一个名为 “还有什么会影响浏览器 CPU 的条目”使用情况和 AJAX 性能?” 给出了一些可能有帮助的更多提示。

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.

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.

岁月苍老的讽刺 2024-12-03 00:14:28

您可以尝试 Chrome/Chromium 开发人员工具 » Profiler,启动,重新加载页面,等待几分钟然后停止。这将有足够的数据来了解可能出现的问题。

浏览器上 CPU 使用率高的另一个常见问题是 css 动画(以及 gif 图像)。我在开发 Web 应用程序时遇到了 CPU 使用率高的问题,奇怪的是,它只在选项卡处于活动/可见状态时发生,但在后台时却没有,并且问题出现在 FF、Chrome 上和铬。最后它变成了动画引导进度条。

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

我想这并不是严格意义上的问题答案,而是发现问题的有用提示。由于我还不能发表评论,我决定将其作为答案发布,因为有人会发现它有用,请让我知道这是否是一个不好的做法。

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.

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.

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.

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.

魂归处 2024-12-03 00:14:28

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

我大量使用 FireBug 配置文件功能来做到这一点。您可以看到哪个功能消耗了最多的时间。很棒的事情。使用简单的 javascript 示例在其他页面上尝试此操作。它应该运作良好。如果它在您的示例中不起作用,只需向他们发布错误即可。

Try to reload the page after enabling FireBug profile feature.

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文