jQuery: reducing repaints

Question

Hi

I need to optimize an image gallery slider since a lot of browsers have a hard time dealing with the animations.

Please consider the following example:

var $div1 = $('#div1'),
$div2 = $('#div2'),
$div3 = $('#div3'),
left = 0;

function animate() {
  left -= 10;
  $div1.css({
    left: left + 'px',
    width: 1000 - left + 'px'
  });
  $div2.css( 'left', left - 10 + 'px' );
  $div3.css( 'left', left - 40 + 'px' );
}

setInterval( animate, 20 );

This, of course, puts an immense pressure on a lot of browsers and it requires three repaints every 20 ms!

Is there any way to clone the three div's, work on them off-line and them replace ALL of them at once and thereby reduce the amount of repaints to one?

If you have other suggestions, please feel free to share them.

Thanks!

Answer 1

There are a few ways you can make this process more resource-efficient.

Idea 1: 20ms works out to 50 FPS. Your average Hollywood film runs at 24-30 FPS (I forget the exact frame rate). Try an interval of 33 - 40ms.

Idea 2: Use absolute positioning where possible to minimize the amount of reflowing required for the rest of the document.

Idea 3: Consolidate all of your animations into a single timer. I imagine most good frameworks will take care of this for you.

Ultimately, either you or your framework will be iteratively setting the CSS properties for each selector, so I think you will realize your gains by looking elsewhere.