Event Loop

Queue에는 3가지가 있습니다

MacroTaskQueue

• setTimeout,setInterval,Event Dispatch,networking response....
• 이벤트 루프는 MacroTaskQueue에 있는 task를 하나만 빼서 실행하고 다음 루프로 넘어갑니다

MicroTaskQueue

• Promise,MutationObserver
• 이벤트 루프는 MicroTaskQueue가 빌떄까지 task를 처리합니다
• task처리중에 queue에 또 task가 들어가도, 다음 루프로 미루지 않고 끝까지 처리합니다
• JSEngine의 CallStack이 비자마자 MicroTaskQueue가 제일 먼저 처리됩니다. 즉 우선순위가 높습니다
• 처리중에 micro stack이 또 쌓여도 처리해준다. 무한루프 조심!

AnimationFrameQueue

• requestAnimationFrame으로 등록한 callback함수들이 이 queue에 들어갑니다

• repaint 직전에 queue에 있는 task들을 전부 처리합니다

• animation에 사용하면 frame drop을 최소화 할 수 있습니다.

• 처리중에 callback을 쌓으면, 다음번에 처리해준다

  Reference

  https://youtu.be/YpQTeIqjC4o