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

Question

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

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