[JS] lodash의 debounce와 throttle로 성능 향상하기

chaevivi·2023년 8월 13일

lodash의 debounce와 throttle을 사용해서 성능 향상하기

scroll, input 등 짧은 시간 간격으로 연속해서 발생하는 이벤트에 이벤트 핸들러를 바인딩하면 과도하게 호출되어 성능이 나빠질 가능성이 있다.
디바운스와 스로틀은 이러한 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.

lodash

lodash는 debounce와 throttle을 간단하게 구현할 수 있도록 도와주는 라이브러리이다.

debounce와 throttle을 자바스크립트 코드로 작성하면 꽤 복잡하기 때문에 간단하게 구현할 수 있도록 함수를 제공해주는 라이브러리이다.

※ lodash의 debounce와 throttle의 자세한 코드를 살펴보고 싶다면 공식 github 참고
🔗 debounce https://github.com/lodash/lodash/blob/86a852fe763935bb64c12589df5391fd7d3bb14d/debounce.js
🔗 throttle https://github.com/lodash/lodash/blob/86a852fe763935bb64c12589df5391fd7d3bb14d/throttle.js

1. 설치 방법

npm

> npm install lodash

CDN

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">
</script>

2. 함수 사용

debounce

_.debounce(func, [wait=0], [options={}])

throttle

_.throttle(func, [wait=0], [options={}])

func : 호출할 콜백 함수
wait : delay 시간

디바운스 (debounce)

디바운스는 짧은 시간 간격으로 발생하는 이벤트를 호출하지 않다가 마지막에 한번만 이벤트 핸들러가 호출되도록 한다.

디바운스 사용처

resize 이벤트 처리
input 요소에 입력된 값으로 ajax 요청 (자주 사용)
버튼 중복 클릭 방지

스로틀 (throttle)

스로틀은 짧은 시간 간격으로 발생하는 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 호출되도록 한다.

스로틀 사용처

scroll 이벤트 처리
무한 스크롤 UI 구현

debounce와 throttle 구현

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">
  </script>
  <script defer src="main.js"></script>
</head>
<body>
  <button>click</button>
  <pre>일반 클릭 이벤트 카운터    <span class="normal-msg">0</span></pre>
  <pre>디바운스 클릭 이벤트 카운터    <span class="debounce-msg">0</span></pre>
  <pre>스로틀 클릭 이벤트 카운터    <span class="throttle-msg">0</span></pre>
</body>
</html>

const button = document.querySelector('button');
const normalMsg = document.querySelector('.normal-msg');
const debounceMsg = document.querySelector('.debounce-msg');
const throttleMsg = document.querySelector('.throttle-msg');

button.addEventListener('click', () => {
  normalMsg.textContent = +normalMsg.textContent + 1;
});

button.addEventListener('click', _.debounce(() => {
  debounceMsg.textContent = +debounceMsg.textContent + 1;
}, 500));

button.addEventListener('click', _.throttle(() => {
  throttleMsg.textContent = +throttleMsg.textContent + 1;
}, 500));