20220917 TIL
1) addEventListener의 options 중 { passive: ture}에 대하여.
- 자바스크립트에서 addEventListener()를 통해 등록된 이벤트는 컴포지터 스레드가 받음. 이벤트가 들어오면 컴포지터 스레드는 메인 스레드에 이벤트를 넘기고 렌더링 파이프라인에 따라 layout, paint를 거쳐 Layout tree를 기다림. EventListenerOptions의 속성 중 passive 속성이 바로 이 파이프라인과 관계가 있음. { passive:true }는 이벤트를 받는 컴포지터 스레드에 해당 이벤트가 메인 스레드의 처리를 기다리지 않고 바로 Composite를 수행해도 된다는 힌트를 주는 것.
이 속성이 설정되면 컴포지터 스레드는 원래의 동작대로 이벤트를 메인 스레드에 넘기기는 하지만, 처리를 기다리지 않고 바로 Composite를 수행함. 즉, 스크롤 이벤트를 받아 새 프레임을 바로 합성할 수 있다는 의미이고, 결과적으로 스크롤 성능이 향상 됨.
2) { passive:true } 속성을 사용할 경우 e.preventDefault()를 사용할 수 없다
document.addEventListener('touchmove', (e) => {
e.preventDefault();
// Do something...
},
{ passive: true }
);- touchmove 이벤트로 다른 동작을 수행하기 위한 코드, 실제로 크롬에서 실행해 보면 아래 화면과 같이 에러가 발생하고 실제로 이벤트가 막아지지 않음.
- 그 이유는 { passive:true } 힌트를 통해 컴포지터 스레드가 메인 스레드의 처리를 기다리지 않고 바로 합성해야 하는데, listener 함수에 있는 e.preventDefault()는 스크롤을 막고 메인 스레드에서 처리를 해야하는 메소드이기 때문. 따라서 e.preventDefault()를 통해 이벤트를 막을 필요가 있다면 passive 속성은 꼭 false가 되어야 함.
ref