비동기 작업 예시 #

setTimeout #

setTimeout 메서드가 호출되어 콜 스택에서 pop되면 Web API에 의해서 timer가 생성되고 지정한 시간이 지났을 때 callback queue에 enqueue합니다.

그럼 여기서 두 가지 변수로 인해서 시간 지연이 발생합니다.

• callback queue에 enqueue하려는데 queue가 full한 경우
• callback queue로부터 dequeue하려는데 콜 스택이 full한 경우

따라서 setTimeout 메서드의 콜백함수를 실행하기까지 걸리는 시간은 인자로 지정한 시간 이상입니다.

렌더링 #

브라우저는 짧은 주기에 맞춰서 repaint를 수행하는데 해당 작업은 일반 비동기 콜백처럼 따로 render queue에 enqueue되고 콜 스택이 빌 때마다 event loop에 의해서 dequeue되어 처리됩니다.

즉, 콜 스택에 다른 동기작업들이나 비동기 콜백들로 어느 정도 채워져 있는 상태라면 blocking 현상에 의해 적절한 타이밍에 repaint가 수행되지 않을 수도 있습니다.

repaint가 block된다면 사용자 event에 의한 UI 업데이트가 제때 수행되지 않아서 버튼 클릭과 같은 단순한 motion이나 animation이 보여지는 중 끊김현상이 일어날 수도 있습니다.

scrolling과 같이 짧은 시간 안에 빈도수가 높은 이벤트를 비동기적으로 처리한다면 수많은 handler 콜백들이 callback queue에 쌓이고 콜 스택에 차례대로 처리되는 동안에 repaint는 계속 blocking될 수 있습니다.

이러한 문제를 해결하기 위해서 throttling, debounce과 같은 최적화 기법이 자주 활용됩니다.