Throttle이란?

webOS를 개발하면서 여러가지 문제들을 겪었다. 애니메이션의 지연, 키 이벤트 다중호출로 화면 이동의 지연 등 TV라는 디바이스 환경은 웹에 비해서 생각보다 열악했다. 필요에 의해 수많은 최적화들을 거쳤지만 이중 TV개발에 있어서 엄청나게 많은 도움이 되었고, 가장 성능에 많은 영향을 미친 Throttle을 정리해볼까 한다.

 

Throttle

이벤트를 일정 주기마다 발생하도록 처리하는 기법으로 실행이 된 이벤트 이후 지연 시간 내의 이벤트는 실행이 되지않는다. 주로 무한 스크롤 같이 이벤트가 많이 발생하는 경우에 사용이 되는데, 나의 경우는 TV 개발에서 리모콘을 계속 누르고 있는 행위 자체가 수백번의 키 이벤트를 동작하게 하였기에 적용하게 되었다.

 

예시코드

let timer;

function throttle(callback, delay) {
  if (!timer) {
    timer = setTimeout(function () {
      callback();
      timer = null;
    }, delay);
  }
}

function throttling() {
  let timer;

  return {
    throttle(callback, delay) {
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            callback(...arguments);
            timer = false;
          }, delay);
        }
      };
    },
  };
}

동작원리는 파라미터로 전해받은 이벤트를 일정 시간 이후에 실행하도록 하고 해당 딜레이 시간 내에 들어오는 이벤트에 대해서는  실행하지 않게 처리한다. 이러한 방식으로 엄청나게 많은 이벤트가 실행되더라도 처음의 이벤트를 제외하고는 setTimeout을 통해서 콜백함수가 실행되지 않기 때문에 콜백큐에 쌓일 일이 없게 된다. 불필요한 이벤트 처리가 줄어들게 되어 확실한 성능 체감을 하게 되는 성능 최적화 방식이다. 

 

아래는 실제 스크롤 이벤트에 붙였을 때 어느정도로 이벤트 처리가 줄어드는지에 대해 예시로 만든 코드이다. delay를 조절하여 쓰로틀에 해당하는 이벤트 횟수가 어느정도로 조절되는지 체크해볼 수 있도록 만들어보았다. 지금은 이벤트를 통해서 태그 내의 텍스트 수치만 바뀌고 있지만, 해당 이벤트가 많이 무거운 연산작업을 하거나 서버로의 비동기 통신을 한다면 확실한 리소스 절약을 느낄 수 있을 것이다.