jQuery animate()和浏览器性能

Question

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

在视觉上,它的工作非常漂亮.但是,我的处理器在动画期间跳跃到大约50%的使用率.这不是特定于任何单个浏览器 - 在Safari3和Firefox3上也是如此.如果我有两个浏览器都运行该页面,我的CPU会大约95%的使用率.

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

我希望我不必诉诸Flash,但即使在Hulu.com观看节目也不会像我这样刺激我的CPU.

思考？

Answer 1

我知道这是一个古老的问题,蒂姆提供了一个很好的答案,但我只是想我应该为寻找这个问题的解决方案的人发布更新,因为现在有一个更简单的方法......

从jQuery 1.4.3开始,您可以通过jQuery.fx.interval属性直接设置jQuery的animate使用的时间间隔.所以你可以简单地做一些事情:

jQuery.fx.interval = 50;

Answer 2

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

Answer 3

人们已经提到减慢jQuery的刷新率.您可以使用此文件(jquery.animation-fix.js)覆盖jQuery 1.4中的计时器函数:

function now() {
    return (new Date).getTime();
}
jQuery.fx.prototype.custom = function( from, to, unit ) {
    this.startTime = now();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || "px";
    this.now = this.start;
    this.pos = this.state = 0;

    var self = this;
    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId ) {
        //timerId = setInterval(jQuery.fx.tick, 13);
        jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 2050);
    }
}

所以用它来修改这一行

jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 50);

将50更改为您想要的任何间隔.那是毫秒(ms)

如果将此代码保存在其他文件中,则可以像下面这样附加它:

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.animation-fix.js" type="text/javascript"></script>