🚀 성능 최적화(디바운스와 쓰로틀링)

성능 최적화(디바운스와 쓰로틀링)

성능 최적화 왜 필요할까?

scroll, resize, input과 같은 짧은 시간 간격으로 연속해서 발생하는 이벤트가 과도하게 호출되면 성능에 문제를 일으킬 수 있기 때문이다.

검색 입력창의 경우 입력 값이 바뀔때마다 API를 호출하게 되면, 다음과 같은 문제점이 발생한다.

1. 서버비용과 데이터 전송 비용을 증가시킬 수 있다.
2. 서버 및 네트워크 부하를 유발해 서버의 응답 지연이나 네트워크 병목 현상을 초래할 수 있다.

그럼 이벤트 핸들러에 API요청과 같은 무거운 처리를 수행하지 않는다면 괜찮은거 아닌가?

브라우저는 단일 쓰레드에서 이벤트 드리븐 방식으로 동작한다.

우리가 특정 요소에 등록한 이벤트 핸들러는 특정 이벤트가 발생할 때 특정 함수를 호출하도록 브라우저에게 위임한다.

개발자가 사용자의 이벤트가 언제 발생할지 모르니 브라우저가 특정 행동을 감지하여 이벤트를 발생시키고 우리가 등록한 이벤트 핸들러가 그때 호출되는 것이다.

그럼 브라우저에게 이벤트 핸들러의 호출를 위임했으니, 브라우저가 이벤트 핸들러를 호출하는 과정을 살펴보면 다음과 같다.

1. 자바스크립트 엔진이 소스코드를 실행하면서 개발자가 정의한 이벤트 핸들러를 브라우저에 등록한다.
2. 특정 이벤트가 발생하면 브라우저는 등록된 이벤트 핸들러를 태스크 큐에 push한다.
3. 이벤트 루프가 돌면서 콜스택이 비어있을때 대기중이던 이벤트 핸들러를 콜스택으로 이동시키고, 실행된다.
4. 만약 이전에 태스크 큐에 대기중인 함수가 있다면 먼저 들어온 함수부터 콜 스택으로 이동시켜 실행된다.

위의 내용을 바탕으로, 스크롤이벤트 핸들러가 등록되고 실행되는 과정을 다음과 같이 만들어봤다.

위와 같은 방식으로 이벤트 핸들러가 실행되기 때문에, 스크롤 이벤트 핸들러가 아무리 무거운 처리를 하지 않더라도 다른 비동기 요청이나 이벤트 핸들러의 요청을 지연시킬 수 있고 이는 안좋은 UX로 이어질 수 있다.

input 이벤트에는 디바운스를, 스크롤 이벤트에는 쓰로틀링을 적용한 이유?

디바운스

디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 제일 최신 이벤트 핸들러가 호출되도록 하기 때문에 사용자가 가장 마지막에 입력한 값으로 API 요청을 보내는 상황에 적합하다. 이때, 사용자가 일정 시간 동안 입력하지 않았을때 입력이 완료된 것으로 간주한다.

디바운스 적용전

또한, 사용자가 입력하는 동안 의도하지 않은 API 응답으로 렌더링되어 화면 전환이 빠르게 일어나면서 UX를 저하시킬 수 있다.

따라서, 검색 입력창 회원가입 모달창의 닉네임 입력창과 같은 입력 이벤트가 발생되는 곳에 디바운스를 적용했다.

디바운스 적용후

디바운스 커스텀훅

디바운스는 위와같이 여러군데에서 사용되기때문에, 커스텀훅으로 만들어 재사용성이 가능하게 했다.

쓰로틀링

쓰로틀링은 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.

스크롤 이벤트에 디바운스를 적용하게 되면 사용자가 스크롤 이벤트를 멈추지않고 계속 발생시키는 경우사용자의 스크롤에 실시간으로 반응하지 못하기 때문에 이벤트의 발생 주기를 조절하는 쓰로틀링이 더 적합하다고 생각했다.

스크롤이벤트가 호출 될 때마다 값을 증가하는 상태 값을 값이 변경될 때마다 콘솔로그를 찍어보면 위와 같이 전체 스크롤을 반만 움직이더라도 약 70번의 스크롤 이벤트가 호출되는 것을 볼 수 있다.

쓰로틀링 적용 후 전보다 더 많이 스크롤 했음에도 불구하고 약 30번으로, 50%이상 이벤트 발생 빈도를 줄일 수 있었다.

쓰로틀링 함수

쓰로틀링은 채팅방 페이지의 스크롤 이벤트 핸들러에서만 사용되기 있기때문에, 간단한 유틸 함수로 분리하여 적용하였다.

원본링크

노션 바로가기