디바운싱(debouncing) vs 쓰로틀링(throttling)

 

디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기보다는 프로그래밍 기법 중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 최적화를 위해 사용되곤 합니다. 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 프로그래밍 기법입니다.

그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠!

• 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됩니다.
• 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉, delay 시간 동안 호출된 함수는 무시하는 케이스, 다시 정의하면 특성 자체가 실행 횟수에 제한을 거는 방법입니다.

 

📖언어적 의미

저는 원체 단어나 단순 암기를 못하는 편이라, 새로운 것을 배울 때는 스토리 위주로 생각해서 암기하곤 합니다. 그런 의미에서 Debouncing과 Throttling을 사전에 검색해보았습니다. 

 

Debouncing :

저는 처음에 Debouncing이 debounce라는 동사의 명사 형태인 줄 알았습니다. 그러나, debounce는 사전에 등재된 단어는 아닙니다. Debouncing만이 컴퓨터 사이언스 용어로 등재되어 있습니다. 검색해보니, 전자 쪽에서 bouncing이라는 용어가 있습니다. 스위치들이 접점에서 떨어지거나 붙는 시점에 물리적으로 미세하게 여러 번의 on/off 가 되는 현상을 뜻합니다. bounce의 튀는 의미를 담은 것 같아요. 이는 의도했던 바가 아니니, 방지하는 게 좋겠죠? 그런 의미에서 이런 불필요한 튀는 현상, ( 여러 on/off 발생)을 방지하는 의미에서 debouncing이라고 표현한 것 같습니다. 앞서 말씀드린 '여러 이벤트가 발생할 때, 일정 그룹으로 묶어서 하나로 처리' 하는 debouncing의 의미와 일맥상통하죠!

 

Throttling :

1. 목을 조르다; 목을 졸라 죽이다
2. (자동차 등의 연료) 조절판

목을 조르다(...???)
throttle이라는 단어는 다소 무서운 의미를 가지고 있는데요. 이것 외에도 쓰이는 의미를 보면, 보통 무언가를 '조이거나 조르는' 의미를 담고 있습니다.

throttling은 들어보셨을지 모르겠지만, '압력 조절'이라는 뜻을 가지고 있습니다. 저는 수도꼭지에서 물이 나오는데, 그것을 조여서 압력을 조절하는 이미지를 상상하곤 합니다. 자바스크립트, 혹은 컴퓨터 사이언스에서도 마찬가지의 의미를 담고 있습니다. 요청, 혹은 이벤트가 의도한 바 보다 너무 과도하게 발생할 때, 일정 delay를 주고, delay동안은 수도꼭지를 조여버리는 것입니다. 그 기간 동안 발생한 이벤트, 요청, 함수 등은 무시가 되는 것이죠!

이처럼 용어 자체의 맥락이나 의미를 바탕으로 이해하면 더 오래 기억에 남을 것이라 생각합니다 ㅎㅎ

---

💡 예시

역시 백번 글로 쓰는 것보다 , 한번 직접 예시를 보는 게 제일 이해가 빠르죠! 거두절미하고 바로 예시로 넘어가 보겠습니다.

예시 코드를 위해 기본적인 html 템플릿을 만들어보았습니다.
js 윈도우 객체에 스크롤 이벤트를 담아, 스크롤 이벤트가 발생할 때마다 count를 올리고 로그가 출력되도록 구현했습니다.

- 기본 템플릿

 

- 스크롤 이벤트

스크롤 이벤트가 발생하는 모든 순간마다, 함수가 호출되고 count가 늘어납니다.
스크롤은 조금밖에 하지 않았지만 count 값이 매우 급격하게 늘어나는 것을 볼 수 있죠.
지금은 단순히 로그만을 찍고 count를 늘리는 함수지만, 이 함수가 좀 더 무거운 작업을 하는 경우라거나, 스크롤을 할 때마다 레이아웃 렌더링이 되는 경우는 성능 상의 이슈가 생길 수도 있겠죠. 😅

 

디바운싱 적용

만약 이벤트가 이전 이벤트가 끝나고 300ms 보다 빠르게 발생한 경우, 이전 이벤트에 기록된 디바운서를 지우고 다시 디바운서를 발생시킵니다. 결과적으로 마지막으로 발생한 이벤트에 대해서만 300ms 가 지난 후 이벤트 콜백 함수가 호출되게 됩니다!

 

 

쓰로틀링 적용

쓰로틀러를 200ms동안 작동시키고, 만약 쓰로틀러가 이벤트를 조이고 있는 경우, 해당 이벤트는 무시됩니다. 결과적으로 200ms 동안 최대 1번의 이벤트만이 발생이 가능하게 됩니다!

 

 

---

💡 디바운스와 쓰로틀링의 차이점

사실 이렇게 알아보고서도 디바운스와 쓰로틀링이 같은 맥락의 역할을 하기 때문에 차이를 명확하게 느끼지 못할 수 있는데, 결국 주로 쓰이는 용도가 다르기 때문에 그것에 집중해봐야 합니다.

쓰로틀링은 적어도 정한 시간 이후에는 실행을 보장하지만 디바운스는 이벤트가 실행 중일 때는 실행하지 않고, 특정 시간 사이에 이벤트가 발생되지 않았을 때 마지막 한 번의 실행만 하는 것이다. 그래서 만약에 1초의 시간을 지정하고 그 시간 동안 지속적으로 이벤트가 발생할 경우, 그 사이들의 호출은 모두 무시됩니다.

 

마치며

자바스크립트는 이벤트 기반의 언어이기도 하고, 브라우저 환경에서 렌더링은 성능을 크게 좌지우지하기 때문에, 이런 쓰로틀링과 디바운싱의 개념이 중요하게 여겨지는 것 같습니다. 최근 리액트에서 실험 중인 Concurrent 모드 또한, 이런 애플리케이션 단에서의 디바운싱과 쓰로틀링 구현의 필요성을 줄이기 위하는 데에도 일조하고 있는 것이라고 하죠. 최적화의 방법은 정말 무궁무진하고 그만큼 많은 생각을 해야 된다는 것을 느낍니다. 쓰로틀링과 디바운싱의 이벤트 지연을 통한 최적화 없이도 브라우저가 충분히 빠르게 작동할 수 있는 날이 오겠죠? 하지만 지금으로서는 반드시 알고 있어야 할 개념으로 보입니다 ㅎㅎ 이만 마칩니다!

 

출처 :

• https://ykss.netlify.app/web/debouncing_vs_throttling/
• https://programming119.tistory.com/241