sanguk.dev
작성완료
Debounce와 Throttle로 웹 퍼포먼스 최적화

Debounce와 Throttle로 웹 퍼포먼스 최적화

디바운스는 마지막 이벤트만 실행하도록 일정 시간 기다리는 방식으로, 검색창 자동완성에 적합하다. 스로틀은 일정 시간 동안 한 번만 함수가 실행되도록 제한하여 스크롤과 리사이즈 이벤트에 효과적이다. 디바운스는 연속 입력 처리에, 스로틀은 지속적 이벤트 처리를 위해 사용된다. 이 두 기법은 웹 애플리케이션의 성능을 개선하는 데 큰 도움이 된다.

JavaScriptWeb Front Developer

디바운스와 스로틀이란?

사용자의 입력이나 스크롤 이벤트처럼 짧은 시간에 여러 번 발생하는 이벤트는 웹 애플리케이션 성능에 영향을 줄 수 있다. 디바운스와 스로틀은 이러한 이벤트 호출 빈도를 제어해 성능을 최적화하는 대표적인 기법이다.

디바운스(Debounce)

디바운스는 이벤트가 연속으로 발생해도 마지막 이벤트만 실행하도록 일정 시간 기다리는 방식이다. 검색창 자동완성 등 빠르게 입력되는 이벤트에 적합하다.

javascript
function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleInput = debounce(() => {
  console.log("API 요청 실행");
}, 300);

input.addEventListener("input", handleInput);

스로틀(Throttle)

스로틀은 일정 시간 동안 한 번만 함수가 실행되도록 제한한다. 스크롤, 리사이즈처럼 매우 자주 발생하는 이벤트에 효과적이다.

javascript
function throttle(fn, limit) {
  let waiting = false;
  return function (...args) {
    if (!waiting) {
      fn.apply(this, args);
      waiting = true;
      setTimeout(() => {
        waiting = false;
      }, limit);
    }
  };
}

const handleScroll = throttle(() => {
  console.log("스크롤 이벤트 처리");
}, 200);

window.addEventListener("scroll", handleScroll);

언제 어떤 것을 사용할까?

  • 많은 입력이 연속해서 들어오고 마지막 입력만 처리하면 될 때: 디바운스
  • 지속적으로 발생하는 이벤트를 일정 주기로 처리하고 싶을 때: 스로틀

마무리

디바운스와 스로틀은 간단한 패턴이지만 프런트엔드 성능 개선에 큰 도움을 준다. 상황에 맞는 방식을 적용해 웹 애플리케이션의 반응성과 효율을 높일 수 있다.