터치 및 휠 이벤트 리스너는 사용자 상호작용을 추적하고 맞춤 스크롤 환경을 만드는 데 유용하지만 페이지 스크롤을 지연시킬 수도 있습니다. 현재 브라우저는 이벤트 리스너가 스크롤을 차단하는지 알 수 없습니다. 따라서 페이지를 스크롤하기 전에 항상 리스너의 실행이 완료될 때까지 기다립니다. 패시브 이벤트 리스너는 이벤트 리스너가 스크롤을 방해하지 않음을 나타낼 수 있도록 하여 이 문제를 해결합니다.
브라우저 호환성
대부분의 브라우저는 패시브 이벤트 리스너를 지원합니다. 자세한 내용은 브라우저 호환성
Lighthouse 패시브 이벤트 리스너 감사 실패 방식
등대 페이지 스크롤을 지연시킬 수 있는 이벤트 리스너를 플래그합니다.
Lighthouse는 다음 프로세스를 사용하여 스크롤 성능에 영향을 줄 수 있는 이벤트 리스너를 식별합니다.
- 페이지에서 모든 이벤트 리스너를 수집합니다.
- 터치 이외의 리스너와 휠을 사용하지 않는 리스너를 필터링합니다.
preventDefault()를 호출하는 리스너를 필터링합니다.- 페이지의 호스트가 다른 리스너를 필터링합니다.
Lighthouse는 개발자가 다른 호스트의 리스너 스크립트에 대한 통제 권한이 없다고 가정하고 이를 필터링합니다. 페이지의 스크롤 성능을 저해하는 서드 파티 스크립트가 있을 수 있으나, Lighthouse 보고서에는 등록되지 않습니다.
이벤트 리스너를 수동적으로 설정하여 스크롤 성능을 개선하는 방법
Lighthouse가 식별한 모든 이벤트 리스너에 passive 플래그를 추가합니다.
패시브 이벤트 리스너를 지원하는 브라우저만 지원하는 경우 플래그를 추가하기만 하면 됩니다. 예를 들면 다음과 같습니다.
document.addEventListener('touchstart', onTouchStart, {passive: true});
패시브 이벤트 리스너를 지원하지 않는 이전 브라우저를 지원하는 경우 특성 감지 또는 폴리필을 사용해야 합니다 자세한 내용은 WICG 패시브 이벤트 리스너 설명서 문서의 기능 감지 섹션을 참고하세요.