패시브 이벤트 리스너로 스크롤 성능 개선

Chrome 51의 새로운 패시브 이벤트 리스너는 특히 모바일에서 스크롤 성능을 크게 향상시킬 수 있는 새로운 웹 표준입니다. 아래 동영상에서 개선사항을 직접 보여주는 데모를 확인하세요.

사용 방법

페이지를 스크롤할 때 페이지가 손가락에 고정된 느낌이 들지 않는 지연이 발생하는 경우를 스크롤 버벅거림이라고 합니다. 스크롤 버벅거림이 발생하는 경우 터치 이벤트 리스너가 원인일 때가 많습니다. 터치 이벤트 리스너는 삽입된 Google 지도와 상호작용할 때 스크롤을 완전히 취소하는 등 사용자 상호작용을 추적하고 맞춤 스크롤 환경을 만드는 데 유용한 경우가 많습니다. 현재 브라우저는 터치 이벤트 리스너가 스크롤을 취소할지 알 수 없으므로 페이지를 스크롤하기 전에 항상 리스너가 완료될 때까지 기다립니다. 수동 이벤트 리스너는 addEventListeneroptions 매개변수에 리스너가 스크롤을 취소하지 않음을 나타내는 플래그를 설정할 수 있도록 하여 이 문제를 해결합니다. 브라우저는 이 정보를 통해 리스너가 완료한 후가 아니라 페이지를 즉시 스크롤할 수 있습니다.

자세히 알아보기

패시브 이벤트 리스너의 작동 방식에 관한 대략적인 개요는 Chromium 블로그를 확인하세요.

개발자가 스크롤 성능을 개선하는 데 도움이 되는 새로운 API

패시브 이벤트 리스너를 구현하는 방법을 알아볼 수 있는 사양의 저장소:

수동적 이벤트 리스너 설명