태스크 큐란?

이벤트 루프에서 나오는 것인데 MicroTaskQueue, MicroTaskQueue, AnimationFrameQueue 등으로 나뉜다. 웹 API에 따라 마이크로 태스크 큐를 사용하거나, 매크로 태스크 큐를 사용한다.

마이크로 태스크 큐

Promise, MutationObserver

우선순위가 가장 높음. JS엔진은 콜 스택이 비면 마이크로 태스크 큐를 제일 먼저 처리한다.

이벤트루프는 마이크로 태스크 큐가 빌때 까지 태스크를 처리한다.

task 처리 중 queue 에 task 가 들어가도, 다음 루프로 미루지 않고 끝까지 처리한다.

우선순위가 가장 높음 JS엔진은 콜 스택이 비면 마이크로 태스크 큐를 제일 먼저 처리한다.

매크로 태스크 큐

setTimeout, setInterval, networking response, event dispatch …

이벤트 루프는 매크로 태스크 큐에 있는 태스크를 하나만 빼서 실행하고 다음 루프로 넘어간다.

애니메이션 프레임 큐

rAF(request Animation Frame) 으로 등록한 callback 함수들이 이 queue에 들어간다.

리페인트 직전에 큐에 있는 태스크를 전부 처리한다.

animation에 사용하면 frame drop를 최소화 할 수 있다.

순서!

console.log("start");

setTimeout(() => {
  console.log("macrotask 1");
}, 0);

Promise.resolve()
  .then(() => {
    console.log("microtask 1");
  })
  .then(() => {
    console.log("microtask 2");
  });

requestAnimationFrame(() => {
  console.log("requestAnimationFrame callback");
});

console.log("end");

위 같은 코드를 실행할 때 어떻게 출력이 될까?
나님 생각
start
end
microtask 1
microtask 2
macrotask 1
requestAnimationFrame callback
순서로 출력될 것이라 생각했다.
틀린건 아니지만 매크로 큐와 AnimationFrameQueue 의 순서는 브라우저마다 다르기도하고 정해져있는 건 아니다. 그래서 매크로큐가 먼저 실행될지 애니메이션 프레임 큐가 먼저 실행될지는 모른다. 왜냐하면, 애니메이션 프레임 큐는 화면 주사율 , 스펙에 따라 또 달라지기 때문이다.