자주 사용 되는 이벤트나 함수 들의 실행되는 빈도를 줄여서 성능 상의 유리함을 가져오기 위한 개념으로, DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 이벤트(event)를 제어(제한)하는 방법
Throttle 과 Debounce 는 이벤트 핸들러의 과도한 횟수가 발생하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다.
자주 사용되는 간단한 예로는 자동 완성이 있다.
예를 들어, 웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 한다고 가정해 봅니다.
스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅을 하게 되면 사용자는 크게 느끼지 못할 수 있으나 이 행위로 인해 수많은 스크롤 이벤트가 발생하게 됩니다.
즉,
사용자가 아래로 5000픽셀 정도의 스크롤 다운을 한다면 100 개 이상의 이벤트가 발생될 가능성이 큽니다.
이러한 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅함으로써 매번 스크롤 이벤트에 대한 콜백(callback)이 발생하고 그 콜백이 수행하는 일이 매우 큰 리소스를 잡아먹게 될 것입니다.
다시 말해, 과도한 이벤트 횟수의 실행으로 이벤트 핸들러가 무거운 계산 및 기타 DOM 조작과 같은 작업을 수없이 많이 수행하는 경우 성능 문제가 발생하고 이는 사용자 경험까지 떨어뜨리게 될 것입니다.Throttle 과 Debounce 사용 사례
사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event 사용하기 위해
사용자가 키보드 입력을 중지(예: 검색창) 할 때까지 ajax 이벤트를 발생시키지 않기 위해
페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 경우에
앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해Debounce
Debounce 는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.
즉, 연이어 호출되는 함수(=여러번 발생하는 이벤트)들 중 마지막 또는 제일 처음 함수(=이벤트)만 호출하도록 하는 것이며 순차적 호출을 하나의 그룹으로 '그룹화'할 수 있다.
Throttle 와 다른점은, 마지막 이벤트에서 일정 시간동안 이벤트가 발생한다면, 또 일정 시간을 기다린다는 점이다.
ex)
당신이 엘리베이터 안에 있다고 상상해 보자.
문이 닫히기 시작하고 갑자기 다른 사람이 타려고 한다면 엘리베이터가
층으로 이동하는 기능을 시작하지 않아서 문이 다시 열리게 되고, 또 다른
사람에 의해 층의 이동 변경 기능이 일어나게 된다.
즉, 엘리베이터는 기능을 지연시키고 있지만(층간 이동), 자원을 최적화하게 된다.아래의 이미지를 보면 연속적인 빠른 이벤트가 단일 디바운싱 이벤트로 어떻게 표현되는지 볼 수 있다. 그러나 이벤트가 큰 간격으로 발생되면 디바운싱은 발생하지 않는다.
Throttle
Throttle은 여러번 발생하는 이벤트를 일정 시간 동안, 한번만 실행 되도록 만드는 개념이다. 즉, 이벤트가 일정한 주기마다 발생하도록 하며, 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것이라고 할 수 있다.
예를 들어 Throttle 의 설정시간으로 1ms 를 주게 되면, 해당 이벤트는 1ms 동안 최대 한번만 발생하게 된다.
특성 자체가 실행 횟수에 제한을 거는 것이기 때문에 일반적으로 성능 문제 때문에 많이 사용하며, 스크롤을 올리거나 내릴 때 scroll 이벤트 핸들러 경우에 매우 많이 발생한다.
scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행될 것이고, 큰 버퍼링으로 이어질 수 있다.
그럴 때 Throttle을 사용할 수 있다. 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것이다.
Debounce와 다른점은 이벤트 발생 시간 이후에 일정 시간 동안 만을 기다리고, 이벤트를 실행 후 재차 기다린 다는 점이다.
Throttle 와 Debounce의 차이점
두 기술의 차이점은 이벤트를 언제 발생 시킬지의 시점 차이이다.
Debounce 는 입력이 끝날때까지 무한적으로 기다리고 입력 주기가 끝나면 출력한다.
Throttle 는 입력이 시작되면, 일정 주기로 계속 실행한다.
입력 주기를 방해하지 않고 일정 시간 동안의 입력을 모아서 한번씩 출력을 제한하는 것.
Debounce 의 시간을 짧게 가져간다면, Throttle 와 비슷한 효과가 날 수 있지만, 그럼에도 시점에서 차이가 날 수 있다.
때문에, 작업물의 성격에 따라 사용방법이 달라질 수 있다.
대표적인 예로 자동완성을 만들 경우,
일정 주기로 자동으로 완성되는 리스트를 보여주는 것에는
사용자 측면에서 (검색 되는 경험)이 유리할 수 있지만,
성능상에서는 Debounce (1번만 호출)가 훨씬 유리할 수 있다.
정리하자면, Throttle은 적어도 몇 밀리 초마다 정기적으로 기능 실행을 보장한다.
Debounce는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법이다.
따라서 5ms 가 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시된다.
ex)
keyboard 가 한자씩 입력될 때마다 api 로 데이터를 가져오게 되면,
사용자의 의도와 무관한 요청 이 자주 발생되는데 이를 줄이기 위해 입력이
끝난 후나, 입력되는 중간 중간 200ms 마다 api 값을 가져온다면 성능에서 매우 유리해 진다.
위 예제에서 Throttle은 200ms 마다 api 값을 가져오는 것이고,
Debounce 는 입력이 끝난후 api 값을 가져오는 것이다.
