⭐️ 개요
위는 window에 scroll 이벤트 발생시 이벤트 핸들러가 동작하는 예시입니다. 보시는 바와 같이 모든 scroll 이벤트를 받아들여 , 무수히 많이 이벤트 핸들러가 호출되어 로그를 출력하고 있습니다. 예시로 든 것과 같이 간단히 출력만 하는 웹 사이트는 큰 문제가 되지 않을 것입니다.
하지만 , 검색창에 검색어를 입력하면 관련 검색어를 추천해주는 웹 페이지라면 어떨까요 ? 사용자가 한 글자를 입력할 때마다 api가 호출되고 서버에서 데이터를 가져온다면 , 더군다나 많은 사용자가 이용한다면 , 서버에 많은 부하를 줄 것입니다.
Debounce와 Throttling은 위와 같은 문제를 해결하기 위하여 자주 사용되는 이벤트나 함수들의 실행 빈도를 줄여서 , 성능 상의 유리함을 가져오기 위한 개념입니다.
즉 , 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화하는 기법이라고 할 수 있습니다.
자세히 한 번 알아볼까요 ?
⭐️ 디바운스 (Debounce)
디바운스는 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 , 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 하는 기법입니다. 이는 이벤트가 종료된 이후 이벤트 핸들러가 호출되는 것과 같습니다.
위에 든 관련 검색어 추천 사이트와 이미지를 예시로 든다면 사용자가 입력을 끝내고 250ms 이후에 관련 검색어를 추천해주는 이벤트 핸들러가 호출될 것입니다.
const debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });debounce는lodash debounce를 이용하여 구현할 수 있습니다.
⭐️ 쓰로틀링 (Throttling)
쓰로틀링은 짧은 시간 간격으로 연속해서 이벤트가 발생하더라도 , 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 하는 기법입니다. 이는 이벤트 핸들로 발생 빈도에 주기성을 주는 것과 같습니다.
마찬가지로 예시를 들어보면 사용자가 입력을 시작하고 250ms의 주기를 갖고 , 이벤트 핸들러가 호출될 것입니다.
const throttled = _.throttle(renewToken, 300000, { 'trailing': false });throttling 또한 lodash throttle을 사용하여 구현할 수 있습니다.
⭐️ 결론
우리가 여러 웹 사이트를 거쳐 다양한 검색 시스템을 볼 수 있는데요.
검색어를 입력하는 동안 연관 검색어가 추천된다면 쓰로틀링 기법을 사용한다고 볼 수 있고 , 검색을 완료한 후에 연관 검색어가 추천된다면 디바운스 기법을 사용한다고 볼 수 있겠습니다.
디바운스와 쓰로틀링 두 기법 중 적합한 기법을 사용하는 것도 중요하지만 , 주기를 얼마로 설정하느냐에 따라 성능 차이가 발생할 수 있기 때문에 적절한 주기를 설정해주는 것이 중요하겠습니다.
이미지 출처 : https://eun-jee.com/post/front-end/debounce_and_throttle/
참고 자료 : https://velog.io/@greencloud/api-와장창-호출하지-않는-법-Feat.-디바운스
