JaeYeopHan
web/optimize-scroll-event/
스크롤 이벤트 최적화 | JBEE.io
⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅을 읽기 전, JavaScript의 Event Loop와 자바스크립트 비동기 처리 과정 일독을 추천 드립니다. 우리는 아래처럼 브라우저의 스크롤에 이벤트를 추가할 수 있습니다. 함수에 를 추가해보겠습니다
https://jbee.io/web/optimize-scroll-event/
스크롤 이벤트에는 기본적으로 방지할 이벤트(preventDefault)가 없기 때문에 { passive : true } 설정이 의미 없어보이네요
@ted-millie 님 말씀대로, 스크롤 이벤트에 { passive: true }는 필요없다고 합니다. 스크롤 이벤트는 이미 스크롤이 발생(triggered)한 뒤의 로직이기 때문이죠. 아래는 각각 MDN과 The Modern JavaScript Tutorial에서 발췌한 내용입니다.
MDN - improving_scrolling_performance_with_passive_listeners
You don't need to worry about the value of passive for the basic scroll event. Since it can't be canceled, event listeners can't block page rendering anyway.
The Modern JavaScript Tutorial - prevent-scrolling
We can’t prevent scrolling by using event.preventDefault() in onscroll listener, because it triggers after the scroll has already happened.
좋은 내용 감사합니다 🙏 rAF에 대해 모르고 있었는데 덕분에 많은 공부가 되었습니다. 글을 읽고 throttle, debounce 구현이 어떻게 되어있나 궁금해서 찾아봤더니 debounce 에 wait parameter가 주어지지 않았을때 내부적으로 rAF를 사용하는 부분이 있어 신기했습니다. https://github.com/lodash/lodash/blob/master/debounce.js#L79
