Быстрая прокрутка без OnScroll?

Question

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

window.addEventListener('scroll', function() {
    console.log('Scrolling: ' + window.pageYOffset);
});

Код из статьи:

function loop() {
    if (lastPosition == window.pageYOffset) {
        requestAnimationFrame(loop);
        return false;
    } else lastPosition = window.pageYOffset;

    console.log('Scrolling: ' + window.pageYOffset);
    // make sticky calculations...

    requestAnimationFrame(loop);
}
loop(); // start loop

Эти два фрагмента кода выдают одинаковое (Y) смещение и, по-видимому, эквивалентны с точки зрения производительности. Итак, мой вопрос: является ли статья правильной?

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

Любая информация или совет приветствуется!

Answer 1

Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно дорогостоящие операции, такие как модификации DOM. Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame, setTimeout или customEvent.

Важно не только использовать requestAnimationFrame для анимации, но и использовать ее правильно. - html5rocks

Также см. https://developer.mozilla.org/en-US/docs/Web/Events/scroll

Это хороший маленький кусочек кода для получения правильного префикса браузера. Если requestAnimationFrame не поддерживается, мы отступаем к setTimeout(function(){}, 0),

var requestAnimationFrame = window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.msRequestAnimationFrame
    || window.oRequestAnimationFrame
    || function(callback){ setTimeout(callback, 0) };

// Usage
window.addEventListener('scroll', function() {
    requestAnimationFrame(this.scroll); // call scroll event handler
});