개념
Touch, Wheel 이벤트 리스너는 사용자 액션을 추척하면서 다양한 scrolling 경험을 주기위해 유용한 함수입니다. 하지만 이 함수들은 사용자가 스크롤링 시 버벅이는 현상을 초래할 수 있다. 이유는 현 브라우저는 해당 이벤트 리스너가 scrolling을 방해하는지 알 수 없기 때문에, scrolling 되기 전에 callback 함수 내의 모든 코드가 실행 될 때 까지 항상 기다려야 하기 때문인데요. passive를 설정하면, 기다리지 않고 바로 scrolling해서 해결 할 수 있습니다. 즉, passive 설정한다는 의미는 preventDefault() 함수를 사용하지 않았으니 기다릴 필요 없다고 브라우저에게 알려준다고 보면 될거 같습니다.
특징
- passive: true인데 preventDefault()를 호출할 경우 브라우저 console.error가 노출됩니다. callback안에 함수는 실행되는거 같지만, side effect가 우려되네요.. 다양하게 테스트를 하지 않해보았습니다.
- 몇몇 브라우저는 wheel, mousewheel, touchstart, touchmove 이벤트일 경우 passive의 기본값을 true로 바꾸어 실행합니다.
브라우저 지원 여부
코드
addEventListener('touchmove', callback, {passive: true})
passive: true 설정 여부에 따른 성능비교 영상
https://www.youtube.com/watch?v=65VMej8n23A
'IT' 카테고리의 다른 글
| IDE - intellij 중복 코드 찾아내기 (0) | 2023.07.04 |
|---|---|
| JS - replaceAll vs regex replace (0) | 2023.07.04 |
| node.js - 'digital envelope routines' 에러 시 해결 방법 (0) | 2023.06.29 |
| TS - Record<K, T> (0) | 2023.06.27 |
| Node 버전 간편하게 관리하기 (0) | 2023.06.23 |
