jQuery animate() and browser performance

Question

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.

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.

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.

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.

Thoughts?

Answer 1

I really like the answer posted by Tim, although I needed to get this fix working in a Drupal 6 production environment.

I have jQuery 1.3.2 installed, through the use of jQuery update module, so there are a few differences between what I'm using and jQuery 1.4 that Tim's fix is designed for.

Following Tim's instructions got me 90% of the way there, I just had to put my thinking cap on for 10 minutes to come up with this code instead..

timer values of 25 - 33 seem to work a lot better than 13ms for medium speed animations such as fading background images.

var timerId;

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) && !timerId ) {
    timerId = setInterval(function(){
        var timers = jQuery.timers;

        for ( var i = 0; i < timers.length; i++ )
            if ( !timers[i]() )
                timers.splice(i--, 1);

        if ( !timers.length ) {
            clearInterval( timerId );
            timerId = undefined;
        }
    }, 25);
}
};

Answer 2

People have mentioned slowing down jQuery's refresh rate. You can override the timer function in jQuery 1.4 with this file (jquery.animation-fix.js):

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);
    }
}

So modify the line with this in it

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

Change the 50 to whatever interval you want. That is in Miliseconds (ms)

If you save this code in a different file, you can attach it like this:

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

Answer 3

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.

Answer 4

I know this is an oldish question and Tim provided a great answer, but I just thought I should post an update for anyone looking for a solution to this problem, since there's now a simpler way...

As of jQuery 1.4.3 you can set the interval jQuery's animate uses directly via the jQuery.fx.interval property. So you can simply do something like:

jQuery.fx.interval = 50;

Answer 5

Animations involve looping operations, and those will really crunch the CPU no matter what.

I dont know how easy it is to do with jQuery, but what needs to happen is the animation needs to consume less cycles. Either you make the ani a little more jagged (the display isnt as smooth), the looping needs to be optimized, or reduce the work of the ani.

40 seconds? isnt that a bit long for an animation? I thought they are sposed to be a little more immediate than that.

Answer 6

jQuery animate uses the javascript function 'setInterval' to update the obects every few milliseconds. Unfortunately the interval in jQuery is per default '13ms'. Thats 76 updates every second. Way to much for such slow and medium animations.

The 13ms are hardcoded into jQuery. So you can directly change this value in the jQuery.js, only. If you only have the slow clowds you can go up to 100ms. If you have some faster animations, too, you should set it to 50.

You can change the parameter for setInterval(); in the function custom. 'jQuery.fx.prototype { ... custom: function() { ... } ... }'