scroll, resize, input과 같은 짧은 시간 간격으로 연속해서 발생하는 이벤트가 과도하게 호출되면 성능에 문제를 일으킬 수 있기 때문이다.
검색 입력창의 경우 입력 값이 바뀔때마다 API를 호출하게 되면, 다음과 같은 문제점이 발생한다.
그럼 이벤트 핸들러에 API요청과 같은 무거운 처리를 수행하지 않는다면 괜찮은거 아닌가?
브라우저는 단일 쓰레드에서 이벤트 드리븐 방식으로 동작한다.
우리가 특정 요소에 등록한 이벤트 핸들러는 특정 이벤트가 발생할 때 특정 함수를 호출하도록 브라우저에게 위임한다.
개발자가 사용자의 이벤트가 언제 발생할지 모르니 브라우저가 특정 행동을 감지하여 이벤트를 발생시키고 우리가 등록한 이벤트 핸들러가 그때 호출되는 것이다.
그럼 브라우저에게 이벤트 핸들러의 호출를 위임했으니, 브라우저가 이벤트 핸들러를 호출하는 과정을 살펴보면 다음과 같다.
위의 내용을 바탕으로, 스크롤이벤트 핸들러가 등록되고 실행되는 과정을 다음과 같이 만들어봤다.