(WIP)스크롤 성능 개선하기(with EventListenerOptions)

스크롤 성능 개선

터치 및 휠 이벤트 리스너에 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);

출처:


[Abel ko]
Written by@[Abel ko]
이 세상을 먼지처럼 살다 갈 👨🏽‍💻입니다. 소프트웨어를 통해 사회적기업을 만드는 것이 꿈입니다.⭐️

GitHubFacebook