우리가 웹사이트 이용할때 검색을 하거나 화면창을 resize할때마다 이벤트가 계속 발생된다. 이는 엄청난 성능 과부하에 걸릴수 있고 디바운스와 쓰로틀링을 사용하여 이를 막을수 있다.
디바운스
짧은 시간내에 연속된 함수/이벤트를 호출할경우, 호출되는 모든함수를 바로처리하지않고 정해진 딜레이 이후에 한번만 처리 하는 패턴
간단히 말해 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 이다.
예를들어 검색창에서 검색을할경우 사용자의 입력을 받고 나서 한번만 api를 호출할수 있게끔 한다.
when use?
1. 검색어(input) 입력과 동시에 네트워크 요청을 통해 검색결과를 가져와야될때 =>이때 글자 한글자 한글자 입력할때마다 네트워크에 데이터를 요청하기 때문에 유료 api를 사용하는 경우 엄청난 과금을 떠앉게 된다.
-
스크롤/리사이즈 이벤트를 바탕으로 작업해야될때
-
문서 편집 자동저장
사용이유
1. 전반적인 성능향상
2. 비용절약(api/서비스 사용)
디바운스 예시코드
$button.addEventListener(
'click',
debounce(() => {
$debounceMsg.textContent = +$debounceMsg.textContent + 1;
}, 1000)
);
쓰로틀링
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
쓰로틀링도 디바운스와 마찬가지로 성능 문제 개선을 위하여 주로 사용한다. 스크롤을 올릴때 스크롤 이벤트가 매우 빈번하게 작동합니다. 그럴때 쓰로틀링을 사용할경우 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되도록 제한 한다면 성능개선에 매우도움이 될것이다. 디바운스와 쓰로틀링 모두 성능개선을 위해 사용하는 패턴으로 디바운스로 구현된것을 쓰로틀링으로 대체해도 가능하다.
$button.addEventListener(
'click',
throttle(() => {
$throttleeMsg.textContent = +$throttleeMsg.textContent + 1;
}, 1000)
);