태스크 큐와 마이크로 태스크 큐

[gs0428]

비교

MDN을 참고하며 쓴 글

• 태스크 큐에 있는 태스크들을 실행할 때, 런타임은 큐에 있는 각 태스크를 이벤트 루프의 새로운 반복이 시작되는 순간에 실행한다. 반복이 시작된 후 큐에 추가되는 태스크들은 다음 반복때까지 동작하지 않을 것이다.
• 태스크가 종료되고 실행 컨텍스트가 비어있을 각각의 경우에, 마이크로 태스크 큐에 있는 각각의 마이크로 태스크가 차례대로 실행된다. 중간에 새로운 작업이 추가되어도 마이크로 태스크의 실행은 큐가 빌 때까지 지속된다는 것이 차이점이다. 다시 말해, 마이크로 태스크는 새로운 마이크로 태스크를 삽입할 수 있고 다음 태스크가 시작하기 전, 현재 이벤트루프 반복의 종료 직전에 실행된다.

마이크로 태스크 큐는 태스크 큐보다 우선순위를 갖고, 다음과 같은 코드들이 대기열에 들어간다.

• Promise handler인 then, catch, finally
• 비동기 실행인 async await
• MutationObserver callback
• queueMicrotask callback

❗ queueMicrotask()를 통해 재귀적으로 마이크로 태스크를 넣을 경우, 마이크로 태스크 큐만 계속 실행되어 브라우저가 멈출 수 있으니 재귀적으로 사용시 조심해서 사용해야 한다.

간단한 예제

let callback = () => log("일반 타임아웃 콜백을 실행했습니다.");

let urgentCallback = () => log("*** 앗! 긴급 콜백을 실행했습니다!");

let doWork = () => {
  let result = 1;

  queueMicrotask(urgentCallback);

  for (let i = 2; i <= 10; i++) {
    result *= i;
  }
  return result;
};

log("주 프로그램 시작");
setTimeout(callback, 0);
log(`10!은 ${doWork()}과 같습니다.`);
log("주 프로그램 종료");

주 프로그램 시작
10!은 3628800과 같습니다.
주 프로그램 종료
*** 앗! 긴급 콜백을 실행했습니다!
일반 타임아웃 콜백을 실행했습니다.

위 예제에서 보듯 doWork라는 함수에서 queueMicrotask()로 마이크로 태스크를 추가해도 모든 로그가 종료된 후에 출력된다. 위에서 언급했듯이 마이크로태스크 큐는 태스크 큐보다 우선순위를 갖기 때문에 먼저 출력되는 것을 볼 수 있다.

추가로 보면 좋은 자료

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue