High CPU Usage with JQuery Animation

Question

I found a jQuery script online that creates multiple span elements below the viewport (each containing the same small animated gif) and moves each of these to the top of the page at different speeds and then repeats the loop over and over.

Currently this uses about 10% of my processor time. Is there anyway to reduce this CPU usage even further? I have reduced the number of span elements, but this didn't help very much.

I read about setting setInterval, which I have done and it helped somewhat, but I still believe it is too high for what I believe is a simple animation.

var easings=[]
$.each($.easing,function(i,v){
    if ($.isFunction(v))
        easings.push(i)
})
function randomEasing(){
    return easings[Math.floor(Math.random()*easings.length)]
}
function cloud(x,y,toX,toY,speed){
    var easingUp=randomEasing()
    $('<span class="cloud">')
    .text(easingUp)
    .css({
        top:y,
        left:x
    })
    .animate({
        top:toX,
        left:toY
    },{
        duration:speed||500,
        complete: function(){
            $(this).remove();
            cloud(x,y,toX,toY,speed)
            },
        specialEasing: {
            top: easingUp,
            height: randomEasing()
        }
    })
    .appendTo('body')
}
function randy(from,to){
    return  Math.floor(Math.random()*(to-from)+from)
}
$(function(){
    var bottom=$(window).height()+90
    var right=$(window).width()-200
    for(var left=50;left<right;left+=50){
        cloud(left,bottom+90,-70,"-="+randy(-10,10),randy(10000,24000))
    }
})
jQuery.fx.interval = 60;

Is there anything else I can do to reduce CPU usage, or is this the best I can do with jQuery and should be looking at other solutions?

Deryck · Accepted Answer · 2014-01-11 19:31:43Z

2

The difference in performance at this low level between using .width() or .height() and .innerWidth / .outerWidth and height respectively, is enormous.
You should be caching your selectors, for sure.
Put semicolons where they belong. Javascript doesn't force you to but the price you pay is that the browser does a guessing game for where they should supposedly go.
The absolute worst offenders in your code are unfortunately the ones that you probably can't compromise with - Math.floor() and Math.random()
Ditch the jQuery references. Something that actually needs CPU and memory can't afford to go through a large library like jQuery everytime it needs something. Native Javascript is often times exponentially faster.

If you'd like to benchmark which things will benefit the most, I recommend JSPerf.com

Test different code snippets against each other that you would be using and see what things you should change (or perhaps keep the same - some things jQuery can actually do more efficiently on some browsers).

Here's an example set to show the performance gaps between native JS and jQuery

The biggest attraction jQuery would have to this is its cross-browser compatibility thoroughness. You can do this manually as well but jQuery has been optimized over many years to handle it for you. (just not version 2.x - they threw out the support for older browsers in there).

Just gotta weigh your pros and cons really.

If you have a working version of this you should post it so we can try and diagnose/pinpoint problem code.

answered Jan 11, 2014 at 19:31

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1342220 Over a year ago

Admittedly I am not as proficient in javascript/jquery as I am with PHP, but your suggestions will at least help me get onto the right track. =) Here is a jsfiddle with the code running to get an idea of what it looks like on the webpage: jsfiddle.net/E8Lh8/2

Collectives™ on Stack Overflow

High CPU Usage with JQuery Animation

1 Answer 1

Here's an example set to show the performance gaps between native JS and jQuery

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related