[javascript] 이벤트 핸들링 최적화 방법

05 Dec 2023

javascript

이벤트 핸들링은 웹 애플리케이션에서 사용자와의 상호작용을 처리하기 위해 중요한 부분입니다. 그러나 이벤트 핸들링은 많은 이벤트가 발생할 때 성능 문제를 일으킬 수 있습니다. 이러한 문제를 해결하기 위해 이벤트 핸들링을 최적화하는 방법을 알아보겠습니다.

1. 이벤트 위임(Event delegation)

이벤트 위임은 이벤트가 발생한 요소가 아닌 부모 요소에서 이벤트를 처리하는 방법입니다. 이렇게 하면 각각의 요소에 이벤트 핸들러를 등록하는 것이 아니기 때문에 메모리 사용량을 줄일 수 있습니다. 대신, 이벤트가 발생한 요소를 동적으로 식별하여 처리해야 합니다.

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    // 이벤트 발생 요소가 child 클래스를 갖고 있을 때 처리 로직 작성
  }
});

2. 이벤트 리스너 최적화

이벤트 핸들러는 성능 저하 요소 중 하나입니다. 따라서 필요한 경우에만 이벤트 핸들러를 등록하고, 불필요한 경우에는 제거하는 것이 좋습니다. 특히, 스크롤 이벤트와 같이 빈번하게 발생하는 이벤트의 경우에는 주의해야 합니다.

function scrollHandler(event) {
  // 스크롤 이벤트 처리 로직 작성
}

window.addEventListener('scroll', scrollHandler);

// 이벤트 핸들러 제거
window.removeEventListener('scroll', scrollHandler);

3. 이벤트 디바운싱(Debouncing)과 스로틀링(Throttling)

이벤트 핸들러를 호출하는 빈도를 제어하여 성능을 최적화할 수 있습니다. 디바운싱은 이벤트가 발생한 후 일정 시간이 경과할 때까지 이벤트 핸들러를 호출하지 않는 것을 의미하며, 스로틀링은 일정 시간마다 최대 한 번의 이벤트 핸들러 호출만 허용하는 것을 의미합니다.

// 디바운싱
function debounce(func, delay) {
  let timer;
  
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  }
}

window.addEventListener('scroll', debounce(scrollHandler, 250));

// 스로틀링
function throttle(func, limit) {
  let throttled = false;

  return function() {
    if (!throttled) {
      throttled = true;
      setTimeout(function() {
        func();
        throttled = false;
      }, limit);
    }
  }
}

window.addEventListener('scroll', throttle(scrollHandler, 250));

정리하자면, 이벤트 핸들링을 최적화하기 위해 이벤트 위임, 이벤트 리스너 최적화 및 이벤트 디바운싱과 스로틀링을 활용할 수 있습니다. 이러한 기술을 적절히 활용하여 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

참고 자료:

JavaScript Event Delegation

JavaScript Debouncing and Throttling