Chrome 51의 새로운 기능인 패시브 이벤트 리스너는 특히 모바일에서 스크롤 성능을 크게 향상시킬 수 있는 신흥 웹 표준입니다. 아래 동영상에서 개선된 기능을 나란히 비교해 보세요.
작동 방식
페이지를 스크롤할 때 지연이 발생하여 페이지가 손가락에 고정되지 않는 느낌을 주는 것을 스크롤 버벅거림이라고 합니다. 스크롤 버벅거림이 발생하는 경우 대부분 터치 이벤트 리스너가 원인입니다. 터치 이벤트 리스너는 사용자 상호작용을 추적하고 삽입된 Google 지도와 상호작용할 때 스크롤을 완전히 취소하는 등 맞춤 스크롤 환경을 만드는 데 유용합니다.
현재 브라우저는 터치 이벤트 리스너가 스크롤을 취소할지 알 수 없으므로 항상 리스너가 완료될 때까지 기다린 후 페이지를 스크롤합니다.
패시브 이벤트 리스너는 리스너가 스크롤을 취소하지 않음을 나타내는 플래그를 addEventListener
의 options
매개변수에 설정할 수 있도록 하여 이 문제를 해결합니다. 이 정보를 통해 브라우저는 리스너가 완료된 후에 페이지를 스크롤하는 대신 즉시 스크롤할 수 있습니다.
자세히 알아보기
수동 이벤트 리스너의 작동 방식에 관한 대략적인 개요는 Chromium 블로그를 참고하세요.
개발자가 스크롤 성능을 개선하는 데 도움이 되는 새로운 API
패시브 이벤트 리스너를 구현하는 방법을 알아볼 수 있는 사양 저장소도 있습니다.