패시브 리스너를 사용하여 스크롤 성능 개선

터치 및 휠 이벤트 리스너는 사용자 상호작용을 추적하고 맞춤 스크롤 환경을 만드는 데 유용하지만 페이지 스크롤을 지연시킬 수도 있습니다. 현재 브라우저는 이벤트 리스너가 스크롤을 방지하는지 알 수 없으므로 항상 리스너가 실행을 완료할 때까지 기다린 후 페이지를 스크롤합니다. 패시브 이벤트 리스너는 이벤트 리스너가 스크롤을 방해하지 않음을 나타낼 수 있도록 하여 이 문제를 해결합니다.

브라우저 호환성

대부분의 브라우저는 패시브 이벤트 리스너를 지원합니다. 브라우저 호환성을 참고하세요.

Lighthouse 패시브 이벤트 리스너 감사 실패 방식

Lighthouse는 페이지 스크롤을 지연시킬 수 있는 이벤트 리스너에 플래그를 지정합니다.

Lighthouse 감사에서 페이지가 스크롤 성능 개선을 위해 패시브 이벤트 리스너를 사용하지 않는 것으로 확인됨

Lighthouse는 다음 프로세스를 사용하여 스크롤 성능에 영향을 줄 수 있는 이벤트 리스너를 식별합니다.

  1. 페이지에서 모든 이벤트 리스너를 수집합니다.
  2. 터치나 휠이 아닌 리스너를 필터링합니다.
  3. preventDefault()를 호출하는 리스너를 필터링합니다.
  4. 페이지의 호스트가 다른 리스너를 필터링합니다.

Lighthouse는 개발자가 다른 호스트의 리스너 스크립트에 대한 통제 권한이 없다고 가정하고 이를 필터링합니다. 페이지의 스크롤 성능을 저해하는 서드 파티 스크립트가 있을 수 있으나, Lighthouse 보고서에는 등록되지 않습니다.

스크롤 성능을 개선하기 위해 이벤트 리스너를 패시브로 만드는 방법

Lighthouse가 식별한 모든 이벤트 리스너에 passive 플래그를 추가합니다.

패시브 이벤트 리스너를 지원하는 브라우저만 지원하는 경우 플래그를 추가하기만 하면 됩니다. 예를 들면 다음과 같습니다.

document.addEventListener('touchstart', onTouchStart, {passive: true});

패시브 이벤트 리스너를 지원하지 않는 이전 브라우저를 지원하는 경우 기능 감지 또는 폴리필을 사용해야 합니다. 자세한 내용은 WICG 패시브 이벤트 리스너 설명서 문서의 기능 감지 섹션을 참고하세요.

리소스