jQuery Parallax/Scroll Events 성능

Question

이 질문은 이벤트를 스크롤하는 것보다 시차가 덜합니다. 내 프로젝트의 가장 중요한 관심사는 시차 스크롤 효과가 부드럽고 불편하지 않다는 점입니다.

제 질문은 특정 속성이 다른 것들보다 애니메이션/스크롤이 더 좋습니까? 예를 들어 배경 위치는 스크롤의 여백을 조정하는 것보다 효과적입니다.

Answer 1

다른 속성보다 애니메이징하는 동안 일부 속성의 오버 헤드가 적 으면 확실하지 않지만 누군가 해당 정보를 게시하면 매우 흥미가 있습니다. 그것이 성능 향상에 도움이되는 몇 가지 사항을 알고 있다고 말한 것입니다.

설정 position : absolute은 페이지의 일반적인 흐름에서 요소를 제거하므로 애니메이션 될 때 전체 페이지를 다시 그리지 않아도됩니다. position : relative은 상위 항목과 하위 항목이 영향을받을 수 있으므로 전체 페이지를 강제로 다시 그립니다. 또한

, 당신은 초당 30 프레임을 달성 여전히 scroll 이벤트를 스로틀 수 있습니다 :이 원래 작성 이후

는

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년 8월 26일

상황이 변경되었습니다. 몇 가지 간단한주의 사항 :

• 최신 브라우져 이제 특성 (내 머리 위로 떨어져 opacity 및 transform)의 특정 세트를 주어진 요소의 그림을 가속화 GPU 시도합니다. 이러한 속성을 사용하면 top/left과 같은 다른 페이지보다 성능이 크게 향상 될 수 있습니다 (transform을 사용하는 것보다 더 많은 경우 페이지를 다시 그려야 함).

• will-change은 브라우저에서 선택하는 새로운 속성입니다. 기본적으로 변경할 가능성이있는 속성 목록을 설정할 수 있으므로 브라우저는 미리 속성 변경을 최적화 할 수 있습니다.

• requestAnimationFrame에는 견고한 polyfill과 최신 브라우저 지원이 있습니다. 이것은 브라우저가 가능한 한 렌더링 할 때 많은 "청크"를 만들지 않고 요소를 부드럽게 애니메이션하는 훨씬 더 좋은 방법입니다.