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

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

브라우저 호환성

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

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

Lighthouse는 페이지 스크롤을 지연시킬 수 있는 이벤트 리스너를 신고합니다.

Lighthouse 감사에서 스크롤 성능 개선을 위해 페이지에서 패시브 이벤트 리스너를 사용하지 않음을 확인함

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

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

Lighthouse는 개발자가 다른 호스트의 리스너를 제어할 수 없으므로 이러한 리스너를 제외합니다. 페이지의 스크롤 성능을 저하시키는 서드 파티 스크립트가 있을 수 있지만 이러한 스크립트는 Lighthouse 보고서에 표시되지 않습니다.

스크롤 성능을 개선하기 위해 이벤트 리스너를 수동적으로 만드는 방법

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

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

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

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

자료