[FE] Debounce와 Throttle

만약 scroll, resize, input, mousemove 같은 연속적인 이벤트들이 제한 없이  짧은 시간 간격으로 연속해서 발생한다면?

이런 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 제어해야 함

=> 다 돈이니까...! 비용이 많이 듦

=> 과도한 호출은 성능에 반드시 문제를 줌

 

이 때 사용되는 디바운스와 스로틀

이벤트 핸들러가 많은 연산을 수행 하는경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술들

디바운스

이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술

=> 순차적 호출을 하나의 그룹으로 그룹화하여 마지막 또는 제일 처음 함수만 호출하도록 하는 것

 

컴포넌트 리사이징 이벤트와 같이 마지막 액션에 대한 처리가 중요한 경우에 활용

자동완성이나 무한스크롤링 같이 계속해서 타이핑하거나 스크롤링 하는 경우에는 이벤트 콜백이 발생하지 않아 사용자가 동작하지 않는다고 느낄 수 있기 때문에 사용하지 않음

스로틀

이벤트를 일정한 주기마다 발생하도록 하는 기술

마지막 함수가 호출된 후 설정시간으로 정해둔 시간이 지나기 전에는 해당 함수를 다시 실행시키지 않는 것

 

특성 자체가 실행 횟수에 제한을 거는 것이기 때문에 일반적으로 성능 문제에 사용

예를 들면 스크롤 이벤트 처리나 무한 스크롤 UI 구현 같은데서?

디바운스 vs 스로틀

스로틀은 같은 이벤트가 반복될 때 적어도 정해진 시간마다 정기적으로 기능 실행을 보장한다는 것

거기다가 일반적으로 함수 호출만 제한하기 때문에 구현 자체가 더 간단함

디바운스는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 이벤트를 발생시킴

 

종합적으로 시간에 민감한 작업은 스로틀링이 시간에 민감하지 않은 작업은 디바운싱이 적합