Task Queue

• Task Queue는 JS 에서 비동기 처리를 담당하는 Queue이다.

Macro Task Queue, Micro Task Queue 두 개로 구분되며 Task Queue 와는 별개로 처리하는 AnimationFrameQueue 가 존재한다. 또한 이 3개의 Queue는 여러가지 비동기 작업을 처리하는데에 있어서 우선순위가 존재한다!

1.animation 2. micro 3. macro<>

Micro Task Queue

• Micro Task Queue에서는 Promise와 같은 비동기 작업의 콜백이 포함된다. 현재 실행 중인 Macro Task가 완료된 이후에 처리된다. Micro Task Queue는 Macro Task Queue보다 우선순위가 높다.

Macro Task Queue

• settimeout 이나 setInterval, requestAnimationFrame, I/O, UI 렌더링 등의 비동기 작업이 포함된다. (+addEventListener나 onclick) 현재 실행 중인 작업이 완료된 이후에 처리된다.(EventLoop가 CallStack이 비어있으면 해당 Task Queue에 대기하고 있던 작업 수행.) Macro Task Queue의 우선순위는 다른 Task Queue보다 낮다.

AnimationFrameQueue

• requestAnimationFrame에 등록된 작업을 처리한다. requestAnimationFrame 함수는 애니메이션과 같이 매 프레임마다 실행되어야 하는 작업을 처리할 때 주로 활용된다.

-> 만약 코드 내에 setTimeout과 Promise().then 문이 있다고 해보자.

먼저 코드평가과정을 거치며 변수 및 변수에 할당된 함수들은 호이스팅되어 메모리 공간을 차지할 것이다. 그 후, 런타임 시기가 되면 callstack에 anonymous를 포함한 모든 수행 작업들이 callstack을 거치며 수행될 것이고, 읽어들인 코드가 setTimeout과 Promise().then 이라는 비동기 함수라면 둘 다 web api를 거쳐 각각 Macro Task Queue 와 Micro Task Queue로 이동하여 대기한다. 그리고 Event Loop가 수시로 확인하여 callstack이 비어있으면 비동기를 제외한 모든 코드가 실행된 것이므로 task queue중 우선순위가 제일 높은 Micro Task Queue에 대기하고 있던 Promise().then 이 먼저 callstack으로 이동하여 수행하고 빠지게 되며 마지막으로 Macro Task Queue에 있던 setTimeout 함수가 이동하여 콜백 함수를 실행한 뒤 빠지게 되며 모든 코드 실행은 종료되게 된다.

=> 위와 같은 JS엔진의 동작 방법을 알고 최적화된 코드를 짜는 것이 중요할 것 같다!