jQuery animate() and browser performance

jquery performance animation cpu-usage
Jeremy Ricketts picture Jeremy Ricketts · Jan 19, 2009 · Viewed 23.8k times · Source

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

Alconja picture Alconja · Dec 8, 2010

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;

Related questions

Multiple requestAnimationFrame performance

If I’m doing multiple animations, is it OK performance-wise to add multiple requestAnimationFrame callbacks? F.ex: function anim1() { // animate element 1 } function anim2() { // animate element 2 } function anim3() { // animate element 3 } requestAnimationFrame(anim1); requestAnimationFrame(anim2); requestAnimationFrame(anim3); Or is it proven worse …

Read More
jQuery hasClass() - check for more than one class

With: if(element.hasClass("class")) I can check for one class, but is there an easy way to check whether "element" has any of many classes? I am using: if(element.hasClass("class") || element.hasClass("class") ... ) Which isn't too bad, …

Read More
jQuery appending an array of elements

For the purpose of this question lets say we need to append() 1000 objects to the body element. You could go about it like this: for(x = 0; x < 1000; x++) { var element = $('<div>'+x+'</div&…

Read More