EventTarget.addEventListener()의 Passive 옵션 알아보기

EventTarget.addEventListener()의 옵션 중 하나로 passive가 지원된다.

passive를 true로 설정함으로써 스크롤 성능을 향상시킬 수 있다.

// Chrome 49 부터 EventListenerOptions 지원
document.addEventListener("touchstart", handler, {
  capture: false, // Chrome 49
  once: false, // Chrome 55
  passive: false // Chrome 51
});

 

어떻게 향상하는걸까?

스크롤 할때 발생하는 터치 이벤트들이 브라우저에서 발생하면, 브라우저는 터치 이벤트 수신기가 스크롤을 취소할지 여부를 알 수 없으므로 항상 수신기가 끝날 때까지 기다렸다가 페이지를 스크롤한다.

passive 옵션을 사용함으로써, 브라우저에게 스크롤을 기다리지 않고 즉시 스크롤해도 됨을 알리는거다.

 

자세히 알아보기

touchstart, touchmove 핸들러의 결과를 기다릴 필요가 있기 때문에 preventDefault()를 이용하여 부분적으로 무효화한다. 분석 결과에 따르면 웹 상의 터치 이벤트 핸들러 대다수는 실제로 preventDefault()를 호출하지 않으므로 브라우저는 불필요한 스크롤을 차단하는 경우가 있다.

예를 들어, 안드로이드용 크롬에서는 스크롤을 차단하는 터치 이벤트의 80%가 실제로 이를 막지 못한다. 이러한 이벤트의 10%는 스크롤 시작에 100ms 이상의 지연을 추가하며, 스크롤의 1%에서 최소 500ms의 치명적인 지연이 발생한다.

이 문제는 터치 이벤트 뿐만 아니라 휠 이벤트에서도 동일한 문제가 발생한다.

이를 해결하기 위해 passive 옵션을 사용한다.

 

사용 가능한 버전

• Chrome 51+, Firefox 49+ 부터 세번째 인자를 useCapture 속성을 포함한 객체로 사용할 수 있도록 변경되었다. (이외는 boolean)
  Chrome 51+ 업데이트사항 보러가기  - https://developers.google.com/web/updates/2016/06/passive-event-listeners
• passive 옵션을 권장하는 경우, 콘솔에 경고로 뜬다.
  Handling of 'touchstart' input event was delayed for X ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

 

 

참고사이트

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

GitHub - WICG/EventListenerOptions: An extension to the DOM event pattern to allow authors to disable support for preventDefault

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN