JavaScript에서 디바운싱 및 스로틀링 마스터하기

안녕하세요!

오늘은 사용자 경험을 최적화하고 웹 애플리케이션의 성능을 개선하기 위한 두 가지 필수 기술인 JavaScript의 디바운싱 및 스로틀링 개념을 살펴보려고합니다. 이러한 방법을 이해하고 구현하면 빈도가 높은 이벤트를 보다 효율적으로 처리하고 애플리케이션의 부하를 줄일 수 있습니다.

디바운싱 및 스로틀링 이란?

디바운싱과 스로틀링은 둘 다 사용자 입력이나 스크롤과 같은 이벤트에 대한 응답으로 특정 기능이 실행되는 빈도를 제한하는 데 사용되는 기술입니다.

반약 빈도를 제한하지 않는다면 어떻게 될까요? 스크롤이벤트를 예로 들어보겠습니다. 우리는 웹사이트를 만들거고, 그 웹사이트에 스크롤 이벤트를 통해 헤더를 숨기거나, 보여주는 기능을 만들겁니다.

스크롤을 아래로 내리면 헤더는 올라가고, 스크롤을 위로 올리면 헤더는 내려오는 이벤트지만, 빈도를 제한하지 않는다면 매번 살짝씩 움직이는 이벤트마다 헤더는 반응할 것이고 성능에 영향을 줄것이라 생각합니다.

디바운싱

디바운싱은 함수가 마지막으로 호출된 이후 일정 시간이 지날 때까지 함수 실행을 지연시킬 수 있는 기술입니다.

이는 사용자 입력 또는 창 크기 조정과 같이 빠르게 발생하는 이벤트에 특히 유용합니다.

디바운싱을 사용하면 불필요한 함수 호출을 방지하고 애플리케이션의 성능을 향상시킬 수 있습니다.

쓰로틀링

스로틀링은 함수의 실행 속도를 제어하는 또 다른 기술입니다.

트리거링 이벤트가 얼마나 자주 발생하는지에 관계없이 고정된 간격으로 기능이 실행되도록 합니다.

스로틀링은 스크롤과 같은 이벤트에 유용하며, 이벤트 실행에서 일시 중지를 기다리지 않고 일관된 속도로 사용자 인터페이스를 업데이트하려는 경우가 있습니다.

Zerocho 님 블로그에 간단하게 정리된 내용이 있는데

쓰로틀링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

이라 정의할 수 있습니다.

디바운싱 및 스로틀링 구현

Lodash와 같은 다양한 라이브러리를 사용하여 JavaScript에서 디바운싱 및 제한을 구현하거나 사용자 지정 함수를 만들 수 있습니다.

Lodash로 디바운싱


import _ from 'lodash';

const debouncedFunction = _.debounce(() => {
  console.log('Debounced function executed');
}, 300);

window.addEventListener('resize', debouncedFunction);

Lodash로 스로틀링


import _ from 'lodash';

const throttledFunction = _.throttle(() => {
  console.log('Throttled function executed');
}, 300);

window.addEventListener('scroll', throttledFunction);

커스텀 디바운싱 기능


function debounce(func, wait) {
  let timeout;

  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

const debouncedFunction = debounce(() => {
  console.log('Debounced function executed');
}, 300);

window.addEventListener('resize', debouncedFunction);

커스텀 스로틀링 기능


function throttle(func, limit) {
  let lastCall;

  return function () {
    const now = Date.now();

    if (!lastCall || now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, arguments);
    }
  };
}

const throttledFunction = throttle(() => {
  console.log('Throttled function executed');
}, 300);

window.addEventListener('scroll', throttledFunction);

결론

디바운싱 및 제한은 이벤트에 대한 응답으로 함수의 실행 빈도를 제어하여 JavaScript 애플리케이션을 최적화하는 강력한 기술입니다.

이러한 방법을 구현하면 빈도가 높은 이벤트를 보다 효율적으로 처리하고 애플리케이션의 부하를 줄여 궁극적으로 사용자 경험과 성능을 모두 개선할 수 있습니다.

JavaScript에서 디바운싱 및 스로틀링 마스터하기생성일2023. 4. 28.태그작성자지한솔