오늘은 쓰로틀과 디바운스에 대해서 알아보겠습니다. 두 가지 기법 모두 DOM 이벤트가 발생했을 때 성능을 최적화하기 위한 기법입니다.

Debounce

예를 들어 보죠. 유저가 검색창에 "보드게임"을 입력한다고 생각을 해봅시다. input 이벤트를 걸어둔다면 검색어를 입력할 때마다 이벤트 콜백함수가 실행될 겁니다.

input.addEventListener("input", eventListener);

• ㅂ, 보, 보ㄷ, 보드, 보드ㄱ, 보드게, 보드게ㅇ, 보드게이, 보드게임

위처럼 각각에 대해 callback 함수를 실행시키는 것보다 유저가 검색어를 다 입력하면 콜백함수를 실행시키는 것이 자원 측면에서 더 효율적이죠.

이렇게 짧은 시간안에 많은 이벤트가 발생했을 경우 이를 무시하고 특정 시간이 지난 후에 이벤트 리스너를 한 번만 발생시키는 기술을 바로 디바운스라고 합니다.

Throttle

자 그러면 쓰로틀에 대해서 알아보죠. 디바운스는 발생한 이벤트들을 무시하고 특정 시간 뒤에 그 이벤트들을 대표하는 하나의 이벤트에 대한 리스너를 실행시키는 기술이었죠. 쓰로틀도 예를 들어보겠습니다.

웹 페이지에서 스크롤 이벤트가 발생했을 때 유저한테 어떤 컨텐츠를 보여주기 위해 이벤트 리스너를 등록했다고 생각해보죠.

window.addEventListener("scroll", eventListener);

만약 이를 디바운스로 처리했다면 유저가 특정 시간동안 스크롤을 하지 않아야만 이벤트리스너가 실행될 겁니다. 하지만 우리는 그것을 원하는게 아니죠. 스크롤 하는 동안에도 이벤트가 발생했으면 합니다.

그런데 만약 이를 아무런 처리없이 이벤트를 등록하게 되면 footer까지 스크롤하는데 엄청나게 많은 스크롤 이벤트가 발생할 겁니다. 자원 측면에서 굉장히 손해죠. 따라서 이럴 때 특정 시간을 주기로 설정해서 그 주기마다 이벤트 리스너가 한 번만 실행될 수 있도록 하는 것이 바로 쓰로틀입니다.

만약 타이머를 400ms로 설정했다고 하면 유저가 스크롤을 할 때 400ms 마다 이벤트 리스너가 1번씩만 실행됩니다. 이렇게 하면 자원을 아낄 수도 있고 유저한테 보여주고 싶은 컨텐츠를 보여줄 수도 있습니다.

사용성

디바운스와 쓰로틀링을 이용하면 어플리케이션에서 발생하는 많은 이벤트들에 대한 지출을 아낄 수 있습니다.

그 뿐만 아니라 ajax 요청이나 api호출을 대해서도 말이죠. 유료 api를 쓰는 이벤트에 대해서 디바운스나 쓰로틀 없이 쌩으로 이벤트를 등록했다고 생각하면 참 끔직하죠...