스크롤 성능 개선

터치 및 휠 이벤트 리스너에 passive 옵션을 설정하면 스크롤 성능을 개선할 수 있다.

preventDefault와 stopPropagation의 차이

• preventDefault는 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 그 이벤트를 취소한다.
• stopPropagation은 이벤트 캡쳐링 버블링에 있어 현재 이벤트 이후의 전파를 막는다.

EventListenerOptions

기존 addEventListener의 3번째 파라미터로 캡쳐링/버블링 여부를 제어할 수 있는 부분이 EventListenerOptions 라는 객체형태의 추가 옵션을 받을 수 있게 되었다.

EventListenerOptions 사용전

document.addEventListener('touchstart', handler, false);

EventListenerOptions 사용후

document.addEventListener('touchstart', handler, {
	capture: false,
	once: false,
	passive: false
});

• capture: 이벤트 캡쳐링 적용 여부.

• once: 이벤트를 한번만 호출하고 해제되는 옵션

• passive: 스크롤 성능 향상을 위한 옵션으로 true일 경우, 스크롤을 위해 블록되는 것을 방지한다. 이 경우, preventDefault를 사용할 수 없다.

  • passive 속성이 false인 경우에 touchstart, touchmove와 같은 이벤트가 발생하면 preventDefault를 이용하여 실제 이벤트 자체를 막을 수 있기 때문에, 브라우저는 scroll을 계속 할지 안할지를 매번 감시해야한다.

    passive 속성을 true로 해주면 preventDefault를 이용하여 scroll 이벤트를 막지 않겠다고 브라우저에게 이야기하는 것이 된다.

// 추가로 영상 URL

패시브 이벤트 리스너를 지원하지 않는 브라우저에서는 세 번째 매개변수가 이벤트를 버블할지 캡쳐할지 표시하는 boolean이다.

패시브 이벤트 리스너를 안전하게 구현하는 방법

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way.
elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false);

출처:

• https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners?hl=ko
• https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
• http://sculove.github.io/blog/2016/12/29/addEventListener-passive/