JQuery: сокращение перерисовок

Question

Мне нужно оптимизировать слайдер галереи изображений, так как многим браузерам трудно работать с анимацией.

Пожалуйста, рассмотрите следующий пример:

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

Это, конечно,, оказывает огромное давление на многие браузеры, и для этого требуется три перерисовки каждые 20 мс!

Есть ли способ клонировать три элемента div, работать с ними автономно, и они заменяют ВСЕ из них сразу итем самым уменьшите количество перекрашиваний до одного?

Если у вас есть другие предложения, , пожалуйста, , не стесняйтесь поделиться ими.

Спасибо!

Answer 1

Есть несколько способов сделать этот процесс более ресурсоэффективным.

Идея 1: 20 мс работает до 50 кадров в секунду. Ваш средний голливудский фильм работает со скоростью 24-30 кадров в секунду (я забыл точную частоту кадров). Попробуйте интервал 33 - 40 мс.

Идея 2: по возможности используйте абсолютное позиционирование, чтобы свести к минимуму количество повторных выпадений, необходимое для остальной части документа.

Идея 3: Объединить все ваши анимации в один таймер. Я думаю, что большинство хороших фреймворков позаботятся об этом за вас.

В конечном счете, либо вы, либо ваш фреймворк будут итеративно устанавливать свойства CSS для каждого селектора, поэтому я думаю, что вы добьетесь своей выгоды, посмотрев в другом месте.