jQuery Parallax / Scroll Events Производительность - PullRequest
Новая
       7

jQuery Parallax / Scroll Events Производительность

5 голосов
/ 18 января 2012

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

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

1 Ответ

11 голосов
/ 18 января 2012

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

Настройка 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
    }
});

ОБНОВЛЕНИЕ :: 2014-08-26

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

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

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

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

...