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的函数以反映动画的状态. .通常，动画相对较短，并且它们可能覆盖相当大的屏幕空间，因此我怀疑(未确认)计时器已过期并以相当高的速率重置，以生成流畅的动画.由于动画需要很长时间，因此您可以修改动画功能，以便可以通过选项设置动画的播放速度.在您的情况下，您只需每250ms左右更新一次，因为您大约每秒覆盖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屋！