[성능 최적화]디바운싱 , 스로틀링

프로젝트를 하면서 이벤트가 자주 발생시킬때, 성능 최적화를 위해 디바운싱 or 스로틀링을 사용하라는 숙제가 있었다.

이때 처음으로 알게된 성능 최적화 기법이다!

 

디바운싱

• 어떤 이벤트가 짧은 시간에 여러 번 발생할 때, 마지막 이벤트만 실행되도록 하는 기법
• 예를들어 사용자가 입력 필드에 글자를 계속 입력할 때마다 검색 요청을 보내면 성능에 문제가 생길 수 있음
  👉디바운싱을 사용하면 사용자가 일정 시간 동안 입력을 멈출 때만 요청을 보내게 함

언제 사용🤔

• 입력 필드에서 실시간 검색: 사용자가 입력할 때마다 API 요청을 보내지 않고, 사용자가 입력을 멈출 때만 요청을 보내고 싶을 때.
• 창 크기 조정 이벤트: 브라우저의 창 크기가 변경될 때, 변화가 멈춘 후에만 계산하거나 처리를 실행하고 싶을 때.

// 사용자가 입력을 멈춘 후 0.5초(500ms)가 지나면 handleSearch 함수가 실행
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// 사용 예시: 검색 요청
const handleSearch = debounce(() => {
  console.log("Search query sent to the server!");
}, 500);

document.getElementById("searchInput").addEventListener("input", handleSearch);

 

 

 

 

스로틀링

• 어떤 이벤트가 여러 번 발생해도 일정한 주기마다 한 번씩만 실행되도록 제한하는 기법
  👉즉, 이벤트가 발생해도 지정한 시간 동안은 다시 실행되지 않도록 함
• 이 방식은 자주 발생하는 이벤트(스크롤, 마우스 움직임 등)를 제어할 때 유용

 

언제 사용🤔

• 스크롤 이벤트: 페이지를 스크롤할 때 너무 자주 실행되는 이벤트를 줄이고, 일정 시간마다 실행하고 싶을 때.
• 무한 스크롤: 스크롤이 내려갈 때마다 API 호출을 일정 주기로 제한하고 싶을 때.

 

// 사용자가 스크롤할 때 1초(1000ms)에 한 번만 handleScroll 함수가 실행
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    func.apply(this, args);
  };
}

// 사용 예시: 스크롤 이벤트 처리
const handleScroll = throttle(() => {
  console.log("Scrolled!");
}, 1000);

window.addEventListener("scroll", handleScroll);

 

디바운싱과 스로틀링이 성능을 향상시키는 이유💘

• 불필요한 연산을 줄여 CPU와 메모리 같은 리소스를 덜 사용하게 하기 때문
• 웹 애플리케이션에서 이벤트가 자주 발생하면(예: 스크롤, 입력, 창 크기 조정 등) 브라우저가 그 이벤트에 대해 매번 처리를 해야 하는데, 이벤트가 너무 자주 발생하면 성능에 부담을 줄 수 있음

∴ 디바운싱과 스로틀링은 자바스크립트 이벤트 처리에서 과도한 함수 호출을 줄여줌으로써, 브라우저의 CPU, 메모리, 네트워크 자원을 효율적으로 사용하게 만들어 성능을 향상시킴👍