how can I make this animation perform better in javascript?

Question

I am just trying to animate these squares but I am seeing pretty bad performance, so i am wondering what I can do to reduce the slowdown that happens after it is running for awhile I assume I have to do some cleanup?

here is the fiddle:

http://jsfiddle.net/JeKYj/

<header id ="space">
 <div id="space_content">   
 </div>
</header>

var universe = ($(window).width() * 400) / 80;
console.log(universe);

var i = 0;
while(i < universe) {
    var rand = Math.floor(Math.random() * 3) + 1;
    var pulse = Math.floor(Math.random() * 500) + 20;
    el = "<div class='star_wrapper'><div class='star' style='width:" + rand +  "px; height:" + rand +  "px; animation-duration:" + pulse + "s; " +  "-webkit-animation-duration:" + pulse + "s;'></div>"
    $('#space_content').append(el);
    i++
}

Answer 1

You can set your element to position:fixed; as this will give each of the element a separate bitmap.

However, animating this many elements won't work in the end as @vals points out in his answer.

This would be a good candidate for canvas though as you can plot your stars and animate all at once on the canvas (see for example my own front page here for a similar canvas approach).

You can use most of the logic you have already and instead plot the stars to canvas instead of creating DOM elements. Transfer the animations to JavaScript to move the stars.

Creating a single element (canvas) and resize it following the window size:

<canvas id="stars"></canvas>

JavaScript:

var canvas = document.getElementById('stars'),
    ctx = canvas.getContext('2d');

window.onresize = sizeCanvas;

function sizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

Then plot and animate your stars (not shown here, but a simple framework you can use as basis):

(function loop() {
    /// clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ...animate and plot the stars here (recommomend using a star "object" ...

    requestAnimationFrame(loop); /// high-efficient timer for animations
})();

Answer 2

What you are doing is basically have a huge amount of divs (if window width is 1000, there would be 5000 divs). and for every one, have an inner div, and this one is animated in the position.

That is an approach that won't work fluid , whatever you do for optimization.

By the way, your tittle is a little misleading, the animation isn't performing in javascript, the javascript is only executed to create the divs, the animation itself is handled by the browser.

A better approach would be that a div (and an animation asociated to it) had some more stars, (may be 20), and so reduce the overhead.

True, the stars movement won't be fully random, there will be groups of stars moving in sync, but anybody will notice.

Well, almost nobody, I have sometimes seen this effect in published animations. (Basically because I know the way it usually works and I spent sometime searching for the grouped stars)