스로틀링 (Throttling), 디바운싱(debouncing)이란?

스로틀링(Throttling)이란?

주로 모바일 기기에서 과도한 작업으로 인해 기기에 무리를 주는 것을 방지하기 위해 성능을 제한하는 것을 말한다.

 

모바일 기기뿐 아니라 서버에 부담을 주는 과한 동작 등이 일어날 때 이를 제어하기 위해 시간을 두어 처리를 한다던지 하는 방식 등을 사용하기도 한다.

 

프로그래밍에서의 스로틀링과 디바운싱

프로그래밍에서의 스로틀링은 주로 함수의 호출이 과도하게 일어나지 않도록 제한하는 것으로, 서버로의 호출에 따라 비용이나 성능에 크게 영향을 미치는 경우가 있어 이를 제한하는 방식을 말한다.

스로틀링

특정 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 시간을 조절하는 것

디바운싱

연이어 동일한 함수가 호출되면 함수들 중 하나의 함​수가 호출되도록 하는 것 (마지막, 혹은 맨 처음)

 

예제 1. 검색 기능에서의 스로틀링과 디바운싱

예를 들어 검색창에 검색을 실행할 때 따로 검색 버튼을 두는 것이 아니라 keyup 이벤트로 요청을 보낸다고 하면, 의미 없는 검색어가 지나치게 많이 서버로 전송이 될 것입니다.

디바운싱을 이용한 제한

일반적으로 타이핑을 한다면 연속으로 타이핑이 일어기 때문에 keyup이벤트가 일어나고 200밀리 세컨드 이내에 요청이 없으면 서버에 검색어를 전달한다. 200밀리 세컨드 이내에 keyup이벤트가 일어난다면 타이머를 초기화하여 다시 200밀리 세컨드를 기다린다는 식으로 제한을 두어 서버로 가는 이벤트를 줄일 수 있을 것입니다.

스로틀링을 이용한 제한

타이핑이 일어난 시점부터 200밀리 세컨드의 타임아웃을 정하고, 200밀리 세컨드에 한 번씩 검색어를 서버에 전달하여 결괏값을 반영합니다. 디바운싱보다는 많은 요청이 가겠지만 서버로 전달되는 요청의 횟수는 많이 줄일 수 있습니다.

 

검색 기능과 같이 단 건으로 일어나는 기능에서는 스로틀링보다는 디바운싱을 이용하는 것이 서버에 보내는 요청을 더 많이 줄일 수 있고 효율적인 방법이라는 것을 알 수 있습니다. 그렇다면 디바운싱을 이용하여 요청의 수를 제한하는 것이 더 효율적 이어 보이는 데 항상 디바운싱으로 작업하면 되지 않을까요? 예제 2번에서 알아봅시다.

 

예제 2. 자동 저장 기능에서의 스로틀링과 디바운싱

블로그 등에서 글을 저장할 때 임시저장 등의 버튼을 누르지 않더라도 저장을 안 하고 창을 닫거나 했을 때 자동으로 기존 글이 저장되어있던 경험을 해보신 적이 있을 것입니다. 임시저장 기능도 여러 가지 방식이 있겠지만, 만약 서버에 임시저장 글을 저장해둔다면 모든 key이벤트에 반응하여 저장 이벤트가 발생한다면 이를 받아줄 수 있는 서비스는 아마 손에 꼽을 정도밖에 없을 것입니다.

스로틀링을 이용한 제한

3분 혹은 5분에 한 번씩 지정된 시간에 서버에 요청을 보내어 임시저장을 하는 방식으로 저장을 합니다. 일반적으로 사용하는 방식으로, 만약 어떠한 문제, 정전이라던가 고양이가 전원 버튼을 눌렀다던가 커피를 쏟는 등의 문제 등이 발생하더라도 일부 작업 내역은 복구할 수 없겠지만 장시간 작업했던 내역에 대한 일정 이상의 내용을 저장하고 있기 때문에 손실을 줄여줄 수 있는 방식이 되겠습니다.

디바운싱을 이용한 제한

타이핑에 시간을 제어한다던지, 엔터를 치는 순간에 저장을 하는 방식 등으로 특정 액션이 일어났을 때 서버에 값을 전달하여 저장하는 방식을 사용할 수 있겠습니다. 글이 짧다면 서버에 전달되는 요청이 많지 않겠지만 상황에 따라 스로틀링 제한 방식에 비하여 많은 요청이 발생할 수도 있습니다.

 

이처럼 스로틀링과 디바운싱 어떤 것이 더 좋다고 단정 짓기보다는 상황에 맞는 방식을 사용하는 것이 가장 효율적인 것이며, 예제 2번의 경우 스로틀링으로 저장을 하다가 이용차가 창을 닫거나 저장하지 않고 페이지를 이동하는 이벤트를 발생시키면 디바운싱을 이용하여 해당 이벤트에 임시저장을 하는 등 두 가지 방식을 섞어서 사용하면, 서버로 전달되는 요청의 양을 줄이면서 이용자의 데이터는 안전하게 보호하는 두 마리의 토끼를 다 잡는 결과를 만들어 낼 수도 있습니다.