패시브 이벤트 리스너로 스크롤 성능 개선
bookmark_borderbookmark
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
Chrome 51의 새로운 패시브 이벤트 리스너는 특히 모바일에서 스크롤 성능을 크게 향상시킬 수 있는 새로운 웹 표준입니다. 아래 동영상에서 개선사항을 직접 보여주는 데모를 확인하세요.
사용 방법
페이지를 스크롤할 때 페이지가 손가락에 고정된 느낌이 들지 않는 지연이 발생하는 경우를 스크롤 버벅거림이라고 합니다. 스크롤 버벅거림이 발생하는 경우 터치 이벤트 리스너가 원인일 때가 많습니다. 터치 이벤트 리스너는 삽입된 Google 지도와 상호작용할 때 스크롤을 완전히 취소하는 등 사용자 상호작용을 추적하고 맞춤 스크롤 환경을 만드는 데 유용한 경우가 많습니다.
현재 브라우저는 터치 이벤트 리스너가 스크롤을 취소할지 알 수 없으므로 페이지를 스크롤하기 전에 항상 리스너가 완료될 때까지 기다립니다.
수동 이벤트 리스너는 addEventListener
의 options
매개변수에 리스너가 스크롤을 취소하지 않음을 나타내는 플래그를 설정할 수 있도록 하여 이 문제를 해결합니다. 브라우저는 이 정보를 통해 리스너가 완료한 후가 아니라 페이지를 즉시 스크롤할 수 있습니다.
자세히 알아보기
패시브 이벤트 리스너의 작동 방식에 관한 대략적인 개요는 Chromium 블로그를 확인하세요.
개발자가 스크롤 성능을 개선하는 데 도움이 되는 새로운 API
패시브 이벤트 리스너를 구현하는 방법을 알아볼 수 있는 사양의 저장소:
수동적 이벤트 리스너 설명
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2016-06-05(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2016-06-05(UTC)"],[],[]]