쓰로틀링(Throttling)과 디바운싱(Debounce)의 차이점
다수 호출로 인한 성능 저하문제
쓰로틀링과 디바운싱은 다수 호출에 따른 성능 저하문제를 해결하기 위해, 적은수의 호출로 전환하는 방법이다. 자바스크립트에서 마우스 스크롤에 별 다른 제약없이 이벤트를 적용하였다면 스크롤 시 해당 이벤트가 미친듯이 다수 호출될것이다. 만약 해당 이벤트 내 무거운 작업이라도 있다면 메모리에 부담을 엄청 줄것이고 이러한 상황에 호출수를 줄이기 위해 고안된 솔루션이 쓰로틀링과 디바운싱이다. 자바스크립트에서뿐만 아니라 다른 언어/개발 환경에서도 단기간에 다수 호출이 일어나는 상황이라면 어떤것이든 적은 량의 다수 호출로 전환하는데 본 기법이 사용될 수 있어서 범용적인 개념이라 볼 수 있다.
다수 호출량을 비교적 적은량의 다수 호출량으로 줄이는 방법
단일 시간 내 호출량을 줄인다는 측면에서 쓰로틀링, 디바운싱은 공통점을 갖고, 방식만 다르다.
- 쓰로틀링은 다수 호출의 간격을 두는것이고
- 디바운싱은 다수 호출을 묶는것이다
”간격” = 쓰로틀링(Throttling)
쓰로틀링은 프론트엔드 개발 시 페이지 로드시간을 느린 시간에서 측정하기 위해 크롬 개발자모드에서 제공하는 네트워크 쓰로틀링을 생각하면 이해가 쉽다. 쓰로틀링이란 용어의 뜻 자체가 호출 사이에 딜레이를 주어 주파수를 낮춘다 = 호출 간격을 늘리는것을 의미한다. 쓰로틀링의 정의는 본연엔 핸드폰에서 발열이 심해지면 기기 보호를 위해 CPU 의 클럭수를 급격히 낮추는것을 의미한다. 게임이나 영상을 좋아하는 사람이라면 영상이 부드럽다가 뚝뚝 끊기는 프레임 드랍을 생각하면 된다.
쓰로틀링은 “매 행동”에 대한 처리가 필요할때 사용한다. 예시로는
- 스크롤에 따른 지속적 이벤트
- 드래그앤드롭 시 지속적 이벤트
”묶음” = 디바운싱(Debouncing)
디바운싱은 회로계에서 비롯된것으로 보인다. 스위치를 On/Off 할때 전류의 흐름이 [ On → Off ] 로 깔끔히 전환되는게 아니라 [ On → Off → On → Off → On → Off ] 처럼 짧은시간에 미세하게 진동하는 현상이 존재한다. 이를 바운스라 하고 이 바운스를 깔끔하게 [ On → Off ] 단일로 전환해주는것을 디바운스라 한다. 수많은 호출을 적은수의 호출로 묶은것이다.
디바운싱은 “행동을 했냐 안했냐”는 단일 사실이 중요할때 사용한다. 예시로는
- 최종 리사이징에 대한 단일 이벤트
- 최종 검색어 입력에 대한 단일 이벤트
정리
정리하자면 특정 행동을 했는지 여부를 판단하고 싶다면 디바운싱을 통해 묶으면 되고, 행동 모두를 인식하고싶은데 이벤트가 너무 많아서 수를 좀 줄이고싶다면 쓰로틀링으로 적절한 딜레이(간격)를 주면 된다.
