스크롤 최적화

스크롤 이벤트 최적화 방법:

1. passive 옵션 사용:
• 스크롤 이벤트의 기본 동작은 스크롤 시에 터치 혹은 마우스 동작을 막을 수 있는데, 이를 방지하려면 passive: true 옵션을 설정할 수 있습니다.
• 이 옵션을 사용하면 브라우저는 이벤트 리스너가 preventDefault()를 호출하지 않을 것이라고 확신하고 성능 최적화를 합니다.
• 예시:

window.addEventListener('scroll', function() {
  // 스크롤 이벤트 처리
}, { passive: true });

2. 스로틀링(throttling):
• 스로틀링은 이벤트가 너무 자주 발생하는 것을 방지하고, 일정 간격으로만 이벤트가 실행되도록 제한하는 방법입니다.
• 스크롤 이벤트를 제한하여 성능 저하를 방지하는 데 매우 유용합니다.
• 예시 (lodash의 throttle 함수 사용):

window.addEventListener('scroll', _.throttle(function() {
  // 스크롤 이벤트 처리
}, 100));  // 100ms마다 실행

3. 디바운싱(debouncing):
• 디바운싱은 이벤트가 끝난 후 일정 시간 동안 기다렸다가 이벤트를 처리하는 방식입니다. 스크롤이 완료된 후에만 이벤트가 실행되도록 할 때 유용합니다.
• 예시 (lodash의 debounce 함수 사용):

window.addEventListener('scroll', _.debounce(function() {
  // 스크롤이 완료된 후에 실행
}, 100));

4. 요소 가시성 체크 (IntersectionObserver):
• 스크롤 이벤트를 직접 사용하는 대신, 요소가 화면에 들어올 때만 이벤트를 처리하도록 IntersectionObserver를 사용하는 방법입니다.
• 성능이 훨씬 개선될 수 있으며, 특히 무한 스크롤이나 Lazy Loading을 구현할 때 유용합니다.
• 예시:

let observer = new IntersectionObserver(function(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 요소가 화면에 보일 때 처리
    }
  });
});
observer.observe(document.querySelector('.target-element'));