디바운스와 쓰로틀링

디바운스(Debounce)와 쓰로틀링(Throttling)은 웹 개발에서 이벤트 처리를 최적화하기 위해 사용되는 두 가지 기법이다.

 

이들은 연속적으로 발생하는 이벤트를 효율적으로 관리하여 성능을 향상시키는 데 도움을 준다.

 

디바운스(Debounce)

 

디바운스는 연속적으로 발생하는 이벤트 중 마지막 이벤트만을 처리하는 기법이다.

 

즉, 일정 시간 동안 이벤트가 발생하지 않을 때까지 대기한 후, 마지막에 발생한 이벤트를 실행한다.

 

이는 사용자가 입력을 멈춘 후에만 처리를 수행하므로, 불필요한 연산을 줄일 수 있다.

 

사용 사례
검색 자동완성 : 사용자가 입력을 멈춘 후에만 서버에 요청을 보내어 검색 결과를 가져온다.
창 크기 조절 : 사용자가 창 크기 조절을 멈춘 후에 레이아웃을 재계산한다.

 

쓰로틀링(Throttling)

쓰로틀링은 연속적으로 발생하는 이벤트를 일정한 간격으로 제한하여 처리하는 기법이다.

 

즉, 이벤트가 지속적으로 발생하더라도 설정한 시간 간격마다 한 번씩만 처리를 수행한다.

 

이는 이벤트 발생 빈도를 조절하여 시스템 부하를 줄이는 데 효과적이다.

 

사용 사례

스크롤 이벤트 : 사용자가 페이지를 스크롤할 때, 일정 시간마다 한 번씩만 이벤트를 처리하여 성능을 향상시킨다.
마우스 이동 이벤트 : 마우스 이동 시 발생하는 이벤트를 제한하여 부드러운 사용자 경험을 제공한다.

 

실행 시점	이벤트가 멈춘 후 일정 시간 경과 시 마지막 이벤트 실행	이벤트 발생 중에도 일정 시간 간격으로 주기적으로 실행
주요 목적	불필요한 이벤트 처리를 방지하여 성능 최적화	이벤트 처리 빈도를 제한하여 시스템 부하 감소
사용 예시	검색 입력, 창 크기 조절	스크롤, 마우스 이동