mathbong
EN
용어 사전 coding 용어 페이지

Microtask Queue

동기 작업 뒤에 Promise·queueMicrotask·MutationObserver 콜백을 먼저 처리하는 큐

microtask-queue #javascript#event-loop
English version

다른 이름

마이크로태스크 큐microtask queue

관련 개념

이벤트 루프Promise비동기 처리Macrotask Queue

핵심 아이디어

자바스크립트 엔진은 동기 코드가 끝나면 렌더링이나 타이머보다 먼저 microtask queue를 비웁니다. Promise.then, async/await, MutationObserver, queueMicrotask로 등록한 콜백이 이 큐에 들어가며, 같은 프레임 안에서 상태를 정리할 기회를 줍니다.

이 블로그에서의 역할

Mathbong의 이벤트 루프 단원은 microtask queue를 활용해 렌더를 묶고 상태 쓰기를 디바운스합니다. microtask가 macrotask queue보다 먼저 실행된다는 성질 덕분에, Promise 체인이 길어도 스크롤과 입력이 버벅이지 않습니다.

이 개념을 다루는 글

[JavaScript 시리즈 10편] 이벤트 루프, 디바운스, 스로틀로 반응성 다듬기 브라우저 이벤트 루프 개념을 짚고 스크롤·입력 최적화를 위한 debounce/throttle 구현을 연습합니다.[JavaScript Series 10] Improving Performance with the Event Loop, Debounce, and Throttle Review how the browser event loop works and practice debounce/throttle patterns to tame scroll and input bursts.