쓰로틀링(throttling)과 디바운싱(debouncing)

스크롤 이벤트가 불필요하게 발생할 경우 성능 이슈가 발생할 수 있기 때문에 쓰로틀링과 디바운싱 기법을 사용해 성능 개선을 진행해볼 수 있어요.

쓰로틀링이란?

정해진 시간 동안 함수가 최대 1회만 호출되도록 제한하는 기법이에요.

서버에 과도한 요청을 보낸다거나, 너무 많은 이벤트가 호출되어 성능적으로 문제가 있을 수 있는스크롤 이벤트, 창 크기 조절 등 연속적으로 발생하는 이벤트를 다룰 때 사용해볼 수 있어요.

디바운싱이란?

함수가 마지막으로 호출된 후 일정 시간이 지나기 전에는 함수가 다시 호출되지 않는 기법이에요.

만약 일정 시간이 지나지 않았음에도 함수 호출이 발생한다면, 대기 시간이 리셋되어 일정 시간 내에 이벤트가 마지막으로 발생한 것을 기준으로 처리를 하게 돼요.

예를 들면, 검색창의 특정 검색어를 입력할 경우 input 이벤트가 발생할 때마다 API 요청을하게 되면 불필요한 네트워크 낭비가 될 수 있기 때문에 검색어가 모두 입력됐다고 가정하는 시점에 API를 호출하도록 만들 수 있어요.