Debounce
과도한 요청, 처리를 수행하게 될 경우 발생할 수 있는 성능 저하를 막기 위해 이를 효과적으로 제어하여 성능을 개선하는 방법 중 하나이다.
연속적으로 호출되는 함수 중 마지막 함수만 호출한다.
다시 말해, 특정 시간 간격 동안 추가 이벤트 호출이 없을 때만 이벤트 핸들러 함수를 실행한다
사용자가 특정 작업(예를 들어, 검색 입력)을 완료할 때까지 기다렸다가 마지막 작업이 수행된 후 일정 시간이 지난 다음에만 API를 호출 합니다. 예를 들어, 사용자가 검색어를 입력하는 동안에는 요청을 보내지 않고, 사용자가 입력을 멈춘 후 일정 시간(예: 300ms)이 경과하면 요청을 보낸다.
Debounce 작동 원리
-
이벤트 발생
: 사용자 인터랙션(예: 키보드 입력, 스크롤, 창 크기 조정 등)으로 인해 이벤트가 발생한다. -
딜레이 설정
: 이벤트 핸들러가 즉시 실행되는 것이 아니라, 일정 시간(딜레이) 동안 대기한다. 이 시간 동안 추가 이벤트가 발생하면 대기 시간이 리셋된다. -
이벤트 처리
: 설정된 딜레이가 경과한 후에 추가 이벤트 호출이 없으면, 마지막으로 발생한 이벤트에 대해 핸들러 함수가 실행된다.
Debounce 주요 사용 사례
-
검색어 입력 최적화: 실시간으로 사용자의 검색어 입력을 감지하고 검색 제안을 제공하는 경우, 사용자가 타이핑을 멈추고 일정 시간이 지난 후에만 서버에 검색 요청을 보내서 과도한 네트워크 트래픽과 서버 부하를 줄일 수 있다.
-
리사이즈 이벤트 제어
-
스크롤 이벤트 처리
Throttle
마찬가지로, 과도한 요청, 처리를 수행하게 될 경우 발생할 수 있는 성능 저하를 막기 위해 이를 효과적으로 제어하여 성능을 개선하는 방법 중 하나이다!!
이 방법은 이벤트의 발생 빈도를 일정한 시간 간격으로 제한하여 과도한 이벤트 처리를 방지한다.
Throttle 작동 원리
-
시간 간격 설정
: Throttle은 정해진 시간 간격 (예: 100ms, 200ms 등) 내에서 이벤트 핸들러의 호출을 제한한다. 즉, 이 기간 동안 여러 이벤트가 발생하더라도 throttle 함수는 이를 하나로 간주하고 한 번만 실행한다. -
이벤트 제어
: 사용자가 특정 동작 (예: 스크롤, 키 입력, 마우스 이동 등)을 수행할 때 이벤트가 연속적으로 발생하면, throttle은 설정된 시간 간격마다 한 번씩만 이벤트 처리 함수를 호출한다. 이렇게 하면 과도한 이벤트 처리로 인한 부하를 줄이면서도 사용자 경험을 유지할 수 있다.
Throttle 주요 사용 사례
- 애니메이션 프레임 제어: 애니메이션 효과를 부드럽게 표현하기 위해, 프레임 당 이벤트 처리를 일정하게 제한하는 데 throttle을 사용할 수 있다.
단, throttle은 이벤트가 일정 간격으로만 처리되므로 중요한 이벤트 업데이트가 누락될 수 있다는 점을 고려해야 한다. 이러한 경우에는 debounce와 같은 다른 기법이 더 적합할 수 있다.
-
스크롤 이벤트 처리
-
리사이즈 이벤트 제어
스크롤 이벤트 처리와 리사이즈 이벤트 제어 대한 Throttle와 Debounce 다른 적용 방법
-
Throttle의 경우
이벤트 핸들러가 일정 시간 간격으로 호출되도록 제한한다. 스크롤 이벤트의 경우, 무한 스크롤과 같이 사용자가 스크롤하는 동안 일정한 간격으로 데이터를 로드하거나 어떤 작업을 수행하는 것이 필요할 때 Throttle이 유용하다. 리사이즈 이벤트에서도, 창의 크기가 변경될 때 일정한 빈도로 UI 업데이트가 필요한 경우 Throttle을 사용할 수 있다. -
Debounce의 경우
이벤트 핸들러가 이벤트의 발생을 멈춘 후 일정 시간이 경과해야만 호출된다. 예를 들어, 사용자가 스크롤을 멈추거나 창 리사이징을 완료한 직후에만 작업을 수행해야 하는 경우 Debounce가 더 적합하다. 따라서, 사용자의 입력이나 작업이 완전히 끝난 후에 반응해야 할 필요가 있는 상황에서 Debounce를 사용한다.
Throttle이 검색 기능 구현에 적합하지 않는 이유
검색 기능 구현, 특히 실시간 검색 제안 기능 같은 경우에는 사용자의 모든 입력이 중요하고, 사용자가 타이핑을 멈췄을 때 최신의 검색 결과를 보여주는 것이 중요하다.
throttle이 적합하지 않는 이유는 다음과 같다
-
데이터 누락: Throttle은 일정 시간 동안 발생하는 이벤트들 중 첫 번째 이벤트만을 처리하고 나머지는 무시합니다. 예를 들어, 사용자가 검색어를 입력하는 동안 throttle이 설정된 시간 간격마다 한 번씩만 검색을 트리거할 경우, 사용자의 최신 입력이 반영되지 않은 채 검색 요청이 이루어질 수 있습니다. 이는 사용자에게 올바르지 않거나 관련성이 떨어지는 검색 결과를 제공할 수 있어, 부정확한 사용자 경험을 초래할 수 있습니다.
-
응답의 지연: Throttle은 일정한 시간 간격으로 이벤트를 처리하기 때문에, 사용자가 타이핑을 멈추더라도 다음 이벤트가 트리거될 때까지 일정 시간을 기다려야 합니다. 이 시간 동안 사용자는 최신 검색 결과를 볼 수 없으므로, 검색 시스템이 느리게 느껴질 수 있습니다.
예시로 알아보는 Debounce와 Throttle의 차이점
무한 스크롤
무한 스크롤 기능을 구현할 때, 사용자가 페이지 하단에 가까워지면 추가 데이터를 불러와야 한다. 이를 위해서는 사용자의 스크롤 위치를 감지해야 하는데, 스크롤 이벤트는 사용자가 스크롤할 때마다 연속적으로 발생하기 때문에 성능 문제를 일으킬 수 있다.
이 문제를 해결하기 위해 "throttle" 기술을 사용한다. Throttle은 일정 시간 동안 한 번만 이벤트를 발생시켜 과도한 이벤트 발생을 제어한다. 예를 들어, 사용자가 스크롤하는 동안 100ms마다 한 번씩만 데이터 로딩 함수를 호출하도록 설정할 수 있다.
반면, "debounce"는 조금 다른 접근 방식을 취한다. Debounce는 특정 시간동안 추가 이벤트 발생이 없을 때 한 번만 이벤트를 처리한다. 따라서, 사용자가 스크롤을 멈추고 일정 시간이 지난 후에야 데이터를 불러오게 되는 것이다.
무한 스크롤 구현의 목적은 사용자가 페이지 끝에 도달하기 전에 데이터를 미리 불러오는 것이므로, 스크롤 이벤트가 지속적으로 발생하는 상황에서는 throttle이 debounce보다 더 적합하다. Throttle을 사용하면 스크롤 중에도 데이터를 적절한 시점에 불러와 사용자 경험을 유지할 수 있다.
정리
Throttle은 정해진 시간 간격마다 이벤트를 실행하도록 제한하여, 연속적인 이벤트에서 일정 시간마다 한 번씩만 반응하게 한다.
반면, Debounce는 연속적인 이벤트가 일정 시간 동안 중단된 후에만 이벤트 핸들러를 실행하여, 많은 요청 중 마지막 요청만 처리한다.
따라서, Throttle은 정기적인 반응이 필요할 때, Debounce는 마지막 상태 반응이 필요할 때 사용됩니다.
