마이크로태스크란? Promise가 setTimeout보다 먼저 실행되는 이유 쉽게 이해하기

왜 Promise가 setTimeout 0보다 먼저일까

setTimeout(..., 0)이 있어도 보통 결과는 A D C B입니다. 마이크로태스크(Microtask)는 현재 JavaScript Task가 끝난 직후, 다음 일반 Task로 넘어가기 전에 우선 처리되는 후속 작업입니다. 「작다」는 이름보다 이벤트 루프에서의 위치·우선순위가 핵심입니다. 대표적으로 Promise.then/catch/finally, queueMicrotask()가 Microtask Queue로 가고, setTimeout·클릭 등은 Task(Macrotask) Queue로 갑니다.

현재 Task 종료
→ Microtask Queue 전부 처리
→ 렌더링 기회
→ 다음 Task (setTimeout 등)

Queue가 비울 때까지 · Starvation

다음 Task로 가기 전에 Microtask Queue를 비울 때까지 처리합니다. 처리 중 새 Microtask가 생기면 그것도 이어집니다. 끝없이 추가되면 Microtask Starvation으로 클릭 Task·Paint가 밀릴 수 있고 INP에도 영향을 줄 수 있습니다. Promise로 감쌌다고 CPU가 Worker로 가지 않습니다 — Microtask 안 Long Task는 TBT와 같습니다. 버튼 글자를 바꾼 직후 무거운 Microtask가 있으면 Paint가 뒤로 밀릴 수 있습니다. Microtask로 옮기는 것과 브라우저에 제어권을 돌려주는 것(다음 Task·스케줄링)은 다릅니다. queueMicrotask를 남용해 모든 setTimeout(0)을 바꾸면 안 됩니다.

async/await · 체인 · 실전 순서

async/await의 await 이후 재개도 Microtask와 연결됩니다. 이미 완료된 Promise.resolve()를 await해도 동기 코드가 먼저 끝난 뒤 B가 이어집니다(A C B). Promise 체인의 각 .then은 앞이 끝나야 다음 Microtask가 생깁니다. fetch 대기 자체는 브라우저가 맡고, 응답 후 무거운 처리는 다시 메인 스레드입니다 — 서버가 빠른가와 「브라우저가 바쁜가」를 구분합니다. MutationObserver 콜백도 Microtask 체크포인트와 관련될 수 있습니다. 프레임워크의 Batching·nextTick 개념을 이해할 때도 이벤트 루프·Microtask가 도움이 됩니다. Unhandled Promise Rejection은 .catch·try/catch로 처리합니다. Promise.all은 네트워크 동시 진행일 수 있어도 JS CPU 자동 병렬화는 아닙니다.

1 5 → 동기
3 4 → Promise 체인 Microtask
2 → setTimeout Task

타이머 Task 안 Promise면: A C → Microtask B → 다음 Task D

자주 묻는 질문

정리

마이크로태스크는 현재 작업이 끝난 직후 다음 일반 Task보다 먼저 처리되는 후속 작업입니다. 동기 JavaScript → Microtask → 일반 Task 순으로 기억하면 됩니다. Promise·async/await·이벤트 루프·setTimeout·Long Task·입력 지연이 여기서 연결됩니다. 그런데 지금까지 등장한 Promise 자체는 무엇일까요? 결과가 바로 나오지 않는 작업에서 「아직 없지만 나중에 성공하거나 실패할 것」을 표현하는 JavaScript 객체가 바로 Promise입니다.