microtask queue 개념을 설명해 주세요

asyncevent-loop

microtask queue 개념을 설명해 주세요

예상 시간: 5분

30초 답변

microtask queue는 현재 실행 중인 동기 코드가 끝난 직후, 다음 task로 넘어가기 전에 먼저 처리되는 비동기 콜백 큐입니다. 대표적으로 Promise.then, queueMicrotask, MutationObserver 콜백이 여기에 들어갑니다.

그래서 같은 코드 흐름에서는 setTimeout(..., 0)으로 등록한 timer보다 Promise 콜백이 먼저 실행됩니다. 다만 microtask queue는 빌 때까지 계속 처리되기 때문에, microtask를 과도하게 이어 붙이면 timer나 rendering이 밀릴 수 있습니다.

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

Promise.then 안에서 setTimeout을 만들고, setTimeout 안에서 Promise.then을 만들면 순서를 어떻게 설명할 건가요?

핵심 규칙은 “지금 실행 중인 task가 끝날 때마다 microtask queue를 비운다”는 점입니다.

setTimeout(() => {
  console.log("timeout 1");
  Promise.resolve().then(() => console.log("promise in timeout"));
}, 0);
 
Promise.resolve().then(() => {
  console.log("promise 1");
  setTimeout(() => console.log("timeout in promise"), 0);
});

처음 script task가 끝나면 먼저 promise 1이 실행됩니다. 이때 새 timer가 등록됩니다. 이후 timer task로 넘어가 timeout 1이 실행되고, 그 task가 끝나기 전에 생긴 promise in timeout은 다음 timer로 넘어가기 전에 먼저 실행됩니다. Promise가 항상 setTimeout보다 먼저인 것이 아니라, 각 task 경계마다 microtask checkpoint가 있습니다.

async/await에서 await 다음 코드는 microtask와 어떤 관계가 있나요?

await 뒤의 이어지는 코드는 Promise reaction과 비슷하게 나중에 이어집니다. 그래서 동기 코드가 모두 끝난 뒤 이어지는 흐름으로 보면 됩니다.

async function run() {
  console.log("A");
  await null;
  console.log("B");
}
 
run();
console.log("C");

출력은 A → C → B입니다. await가 thread 전체를 막는 것이 아니라, async 함수의 나머지 부분을 나중에 이어서 실행하게 만든다고 설명하면 됩니다.

부가 설명

처음 이 순서를 보면 setTimeout(..., 0)이 제일 먼저 실행될 것처럼 느껴질 수 있습니다. 시간이 0ms니까요. 그런데 0ms는 “즉시 실행”이 아니라, timer task를 다음 macrotask queue에 넣겠다는 뜻에 가깝습니다.

반대로 Promise 콜백은 microtask queue에 들어갑니다. 현재 실행 중인 스크립트가 끝나고 call stack이 비면, event loop는 렌더링이나 다음 timer callback으로 넘어가기 전에 microtask를 먼저 확인합니다. 그리고 microtask queue가 비워질 때까지 계속 실행합니다.

console.log("script start");
 
setTimeout(() => {
  console.log("timeout");
}, 0);
 
Promise.resolve().then(() => {
  console.log("promise");
});
 
console.log("script end");

실행 순서는 다음처럼 됩니다.

script start
script end
promise
timeout

여기서 중요한 지점은 Promise가 “비동기인데도 timer보다 빠르다”는 점입니다. 같은 비동기라도 어느 queue에 들어가는지에 따라 실행 순서가 달라집니다.

한 줄 정리

microtask queue는 현재 동기 코드가 끝난 뒤, 다음 timer나 이벤트 콜백보다 먼저 처리되는 Promise 계열의 우선 큐입니다.