| title | date | author | category |
|---|---|---|---|
디바운스, 쓰로틀링 |
2020-07-21 17:00:00 -0700 |
jinsunee |
Javascript |
- 디바운스?
- 스롤링?
이벤트가 과도한 횟수로 발생하는 것이 싫어서.
웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 한다고 가정해봅시다. 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 하게 되었을 때 사용자는 불편함을 크게 느끼지 못할 수 있으나 이 행위로 인해 수 많은 스크롤 이벤트가 발생하게 됩니다.
사용자가 아래로 5000픽셀 정도의 스크롤 다운을 한다면 100개 이상의 이벤트가 발생될 가능성이 큽니다. 이처럼 스크롤 막대를 드래깅함으로써 매번 스크롤 이벤트에 대한 콜백(callback)이 발생하고 그 콜백이 수행하는 일이 매우 큰 리소스를 잡아먹게 될 것입니다. 과도한 이벤트 횟수의 실행으로 이벤트 핸들러가 무거운 계산 및 기타 DOM 조작과 같은 작업을 수없이 많이 수행하는 경우 성능 문제가 발생하고 이는 사용자 경험까지 떨어뜨리게 될 것입니다.
또, 스크롤 이벤트 발생에 따른 api 호출 등 비용과 관련이 된다면 더 큰 문제가 될 수 있습니다.
jQuery 창시자인 존 레식은 다음과 같은 해결책을 제시했습니다.
onScroll 이벤트 외부에서 일정 시간마다 250ms 씩 실행되는 루프였고, 그렇게 하면 과도한 이벤트 처리가 되지 않게 되며 이와 함께 사용자 경험을 망치지 않을 수 있었습니다.
시간이 지남에 따라 함수를 몇번이나 실행 할지 제어하는 것에 목적이 있는 유사한 기술이지만 서로 다릅니다.
- Debounce : 마지막 함수가 호출된 후, 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
- Throttling : 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 즉, 순차적 호출을 하나의 그룹으로 그룹화할 수 있다.
연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
이벤트 묶음에서
마지막에 이벤트를 던져준 경우
처음에 이벤트를 던져준 경우
검색 기능에 유용하다.
이벤트를 일정한 주기마다 발생하도록 하는 기술 예를 들어 무한 스크롤 구현 방식에서 몇초마다 스크롤의 위치를 체크하는 함수를 실행하여 ajax를 호출하는 방식으로 호출 횟수를 줄일 수 있다.
디바운싱과 스로틀의 가장 큰 차이점은 스로틀은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것입니다. Debounce 는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법입니다. 따라서 5ms 가 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시됩니다.
- 디바운스와 쓰로틀링의 차이점 간단하게!
- 이 기술은 왜 나왔죠?
https://webclub.tistory.com/607
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa