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을 사용하는 것이 아니라 올바른 방법으로 사용하는 것이 중요합니다. -

은 또한이 오른쪽 브라우저 접두사를 얻을 수있는 코드의 좋은 작은 조각 https://developer.mozilla.org/en-US/docs/Web/Events/scroll

참조 HTML5ROCKS. 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 
});