[성능] Debounce(디바운스) vs Throttle(쓰로틀)

 

 

 

 

이벤트 제어의 두 방식,

디바운스(Debounce)와 쓰로틀(Throttle)에 대해 알아보겠습니다.

 

 

---

 

언제 이벤트 제어가 필요할까?

 

짧은 시간 내에 수많은 이벤트가 발생하지만, 발생하는 모든 이벤트에 대한 처리가 필요하진 않은 경우에 이벤트 제어 방식을 적용함으로써 처리량을 조절할 수 있습니다.

 

예를 들어, 마우스 움직임이나 타이핑, 또는 스크롤링 등에 의해 발생하는 이벤트가 있습니다.

 

이러한 상황에서 발생하는 모든 이벤트를 처리하려고 하면, 실제 사용자가 체감도 하지 못할 양의 이벤트 처리를 위해 다음과 같은 문제점이 나타날 수 있습니다.

1. 서버/클라이언트의 리소스 낭비
2. 서비스 성능 저하
3. 사용자 경험 저하

반대로, 이벤트 제어를 통해 처리량을 조절하게 되면 다음과 같은 효과를 기대할 수 있습니다.

1. 서버/클라이언트의 리소스 절약
2. 비용 절감
3. 사용자 경험 개선

 

---

 

이벤트 제어 방식

1. 디바운스(Debounce)

연속적으로 발생하는 이벤트들을 그룹화하여, 해당 이벤트 그룹이 일시정지가 되었다고 판단되는 시점이 지나면 최초 또는 최후의 이벤트에 대해서만 처리하는 방식입니다.

 

디바운스 방식은 컴포넌트 리사이징(component resizing) 이벤트와 같이 마지막 액션에 대한 처리가 중요한 경우에 활용할 수 있습니다. 즉, 자동완성이나 무한스크롤링 같이 계속해서 타이핑하거나 스크롤링하는 경우 이벤트 콜백이 발생하지 않아 사용자가 동작하지 않는다고 느낄 수 있기 때문에 부적합합니다.

 

 

2. 쓰로틀(Throttle)

이벤트를 일정 주기마다 처리함으로써 이벤트를 제어하는 방식입니다. 단순히 사용자의 움직임이 멈추었을 때만 동작하는 것이 아니라, 마지막 함수가 호출된 후 일정 시간 이내에 재호출되지 않음으로써, 처리량은 조절되면서 사용자가 서비스의 연속성도 느낄 수 있습니다.

 

쓰로틀 방식은 자동완성(Auto Complete)이나 무한스크롤링(Infinite Scroll) 기능에 적용할 수 있습니다. 계속해서 타이핑하거나 스크롤링하더라도 일정 주기마다 이벤트 콜백이 발생하기 때문에 사용자는 해당 기능이 계속해서 동작하고 있다고 느끼게 됩니다.

 

---

 

정리하기

디바운싱(Debouncing)과 쓰로틀링(Throttling)을 이용한 발생 이미지 처리 빈도를 이미지로 표현하면 아래와 같습니다.

 

 

---

 

 

reference: https://webclub.tistory.com/607 

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점