Throttle, Debounce에 대하여...

<회고록>

오늘은 Throttle, Debounce에 대해서 알아볼려고 한다.

 

1. Throttle, Debounce 의 탄생 배경

 : Throttle, Debounce의 경우에는 DOM의 이벤트 조작을 최적화 시키기 위해서 탄생한 기술이다. 이 말을 이해하기 위해서 다음과 같이 예가 있다고 가정하자. 만약에 내가 스크롤을 할때마다 콘솔을 찍는 로직을 만들었다고 가정하자. 이 코드를 실행시킨다면 스크롤을 밑으로 내릴 때마다 콘솔이 찍힐 것이다. 만약 스크롤의 길이가 5000픽셀이라면 해당 스크롤에 대한 콘솔은 100개 이상이 찍힐 것이다. 이는 굉장한 리소스 자원 낭비이다. 그래서 우리는 이를 해결하기 위해서 Throttle, Debounce가 탄생하게 되었다.

 

2. Debounce에 대하여..

 : 디바운스의 경우 해당 문제를 다음과 같이 해결한다. 요청들을 그룹화 시켜서 여러 이벤트에 적용시키는 것이 아니라 하나의 이벤트에만 해당 그룹화시킨 요청을 보내는 방식이다. 위 기술이 접목된 대표적인 예시로는 실시간 검색이다. 실시간 검색을 할때마다 서버에게 요청을 보내는 것이 아니라 위 요청 내용들을 그룹화시켜서 해당 그룹화된 요청들을 마지막 요청 하나에 보내는 방식이다.

 

3. Throttle에 대하여...

 : 쓰로틀링의 경우 해당 문제를 다음과 같이 해결한다. 요청을 일정한 주기마다 보내는 방식이다. 위 기술이 접목된 대표적인 예시로는 무한 스크롤이다. 스크롤을 맨 마지막으로 보낼때마다 요청을 받아오는 것이 아니라 어느 정도의 높이 만큼 내려왔을 때 요청을 보내는 식으로 특정 기준을 가지고 일정 주기마다 요청을 보내는 방식이다.