jQuery animate() 和浏览器性能 [英] jQuery animate() and browser performance

问题描述

我有一些元素在页面上移动得非常缓慢.本质上，我是在 40 秒左右的时间内减少两个图像的左边距.

I've got some elements that I'm moving across the page very slowly. Essentially, I'm decreasing the left margin of two images over a span of 40 seconds or so.

从视觉上看，它运行得很好.但是，我的处理器在动画期间会跳到大约 50% 的使用率.这也不是特定于任何单个浏览器 - 在 Safari3 和 Firefox3 上也是如此.如果我让两个浏览器都在运行页面，我的 CPU 会以 95% 的使用率尖叫.

Visually, it's working beautifully. However, my processor jumps to about 50% usage during the animations. This isn't specific to any single browser either- it's the same way on Safari3 and Firefox3. If I have both browsers running the page, my CPU is screaming at about 95% usage.

我使用的是 jQuery 1.3.两个动画同时发生.页面上没有 Flash.如果我注释掉代码(移除动画)并刷新页面，我的处理器会立即恢复正常使用.

I'm using jQuery 1.3. Both animations are happening concurrently. There's no Flash on the page. If I comment the code out (remove the animation) and refresh the page, my processor immediately returns to normal usage.

我希望我不必求助于 Flash，但即使在 Hulu.com 上观看节目也不会像这样消耗我的 CPU.

I'm hoping I don't have to resort to Flash, but even watching shows on Hulu.com doesn't spike my CPU like this.

想法?

推荐答案

我认为 jQuery animate() 的工作方式是它使用一个计时器，该计时器定期触发并调用一个更新 DOM 以反映动画状态的函数.通常动画相对较短，它们可能会覆盖相当多的屏幕空间，所以我怀疑(没有确认)计时器到期并以相当高的速率重置以生成平滑的动画.由于您的动画需要很长时间，您可以修改 animate 函数，以便可以通过选项设置动画进行的速率.在您的情况下，您只需要每 250 毫秒左右更新一次，因为您大约每秒覆盖 3-4 个像素.

I think the way jQuery animate() works is that it uses a timer that periodically fires and invokes a function that updates the DOM to reflect the state of the animation. Typically animations are relatively short and they may cover a fair amount of screen real estate, so I suspect (without confirming) that the timer expires, and is reset, at a fairly high rate to generate a smooth animation. Since your animation takes a long time, you might be able to modify the animate function so that the rate at which the animation proceeds can be set via an option. In your case you'd only need to update every 250ms or so since you're covering about 3-4 pixels per second, roughly.

这篇关于jQuery animate() 和浏览器性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！