jQuery Параллакс/Прокрутка События Производительность

Question

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

Мой вопрос: есть ли какие-либо свойства анимировать/прокручивать лучше других? Например, фоновая позиция работает лучше, чем при настройке margin-top на прокрутку.

Answer 1

Я не уверен, что некоторые свойства создают меньше накладных расходов при анимации, чем другие, но Мне было бы очень интересно, если кто-то поместит хорошую информацию по этому вопросу. Говоря, что я знаю пару вещей, которые могут помочь в производительности.

Установка position : absolute удаляет элемент из регулярного потока страницы и, следовательно, не требует перерисовки всей страницы при ее анимировании. position : relative заставит перерисовать всю страницу, так как на нее могут повлиять элементы предка и потомка.

Кроме того, вы можете задушить scroll событие, и достичь 30 кадров в секунду:

var scroll_ok = true; 
setInterval(function() { 
    scroll_ok = true; 
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance 
$(window).bind('scroll', function() { 
    if (scroll_ok === true) { 
     scroll_ok = false; 
     //now run your code to animate with respect to scroll 
    } 
}); 

UPDATE :: 2014-08-26

Все изменилось, так как это было первоначально написано. Несколько быстрых заметки:

• Современные браузеры в настоящее время пытаются GPU ускорения покраски элементов данных определенного набора свойств (opacity и transform с верхней частью моей головы). Использование этих свойств может значительно повысить производительность по сравнению с другими, например top/left (что также требует перерисовки страницы в большем количестве случаев, чем при использовании transform).

• will-change - это новое свойство, которое просто забирают браузеры. Вы можете в принципе установить список свойств, которые могут измениться, чтобы браузер мог заранее оптимизировать изменение свойств.

• requestAnimationFrame имеет прочный полиполк и хорошую современную поддержку браузера. Это гораздо лучший способ плавно анимировать элементы, не создавая тонны «куска», поскольку браузер будет отображать, насколько это возможно.