HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생
/
😃
나영팀
/
Microtask Queue와 Animation frames

Microtask Queue와 Animation frames

발표일
Oct 25, 2022
작성자
김유리
  • 비동기 작업은 Task Queue 뿐만 아니라 Microtask Queue, Animation frames에도 등록됩니다.
  • Microtask Queue와 Animation frames가 무엇인지 조사해보세요.
 
notion image
태스크 큐는 웹 API가 수행한 비동기 함수를 넘겨받아 이벤트 루프가 함수를 콜 스택에 넘겨줄 때까지 비동기 함수들을 쌓아놓는 곳이다.
태스크 큐 말고도 다른 큐들이 존재한다.
이벤트 루프는 브라우저에 존재하는 여러 큐에 우선순위를 부여해 어떤 태스크를 먼저 수행할지 결정한다.

Task Queue = Macrotask Queue

setTimeout(), setInterval(), setImmediate()와 같은 태스크를 넘겨받는다.

Microtask Queue

Promise, async/await, process.nextTick, Object.observe, MutationObserver와 같은 비동기 호출을 넘겨받는다
마이크로태스크 큐의 우선순위는 일반 태스크나 매크로태스크보다 더 높다! (V8 엔진을 사용하는 Chrome 기준)

Animation Frames

requestAnimationFrame과 같이 브라우저 렌더링과 관련된 태스크를 넘겨받는 큐
우선순위는 마이크로태스크보다 낮고, 일반 태스크나 매크로태스크보다 높다.
notion image
 

이벤트 루프가 비동기 작업을 처리하는 우선순위

Microtask Queue → Animation Frames → Task Queue 순
이벤트 루프는 마이크로태스크 큐나 애니메이션 프레임을 방문할 때 큐 안의 모든 작업을 수행하지만, 태스크 큐를 방문할 때는 한 번에 하나의 작업만 콜 스택으로 전달하고 다른 큐를 순회한다.
notion image
 
 
velog.io
https://velog.io/@titu/JavaScript-Task-Queue%EB%A7%90%EA%B3%A0-%EB%8B%A4%EB%A5%B8-%ED%81%90%EA%B0%80-%EB%8D%94-%EC%9E%88%EB%8B%A4%EA%B3%A0-MicroTask-Queue-Animation-Frames-Render-Queue