[TIL]Task Queue,Microtask Queue, Animation frames

Task Queue(Macrotask Queue)

  브라우저에서 실행되는 스크립트들은 어떻게 비동적으로, 동시작업을 진행할까?

브라우저에는 Event Loop라는 시스템이 있기 때문이다. Event Loop는 자바스크립트 엔진에 포함되어 있지 않고 브라우저나 Node.js에서 자체적으로 관리하고 있다. 

 Task Queue는 setTimeout(), setInterval(), setImmediate()와 같은 task를 넘겨받는다. 이후 Call Stack이 비게되면 순차적으로 Call Stack으로 넘어간다.

 그렇다면 Microtask Queue는?

Microtask Queue

 Microtask Queue는 Promise나 async/await, process.nextTick, Object.observe, MutationObserver과 같은 비동기 호출을 넘겨받는다. 그리고 Microtask의 우선순위는 일반 task(또는 Macrotask)보다 더 높다.

// 1. 실행
console.log('start');

// 2. task Queue로 전달.
setTimeout(function () {
  // 8. task 실행
  console.log('setTimeout');
}, 0)

// 3. microtask queue로 전달
Promise.resolve()
  .then(function () {
    // 5. microtask 실행
    console.log('promise1');
    // 6. microtask queue로 전달.
  })
  .then(function () {
    // 7.microtask 실행
    console.log('promise2');
  })
// 4. 실행
console.log('end');

 아래 링크에 가면 에니메이션으로 볼 수 있다.

 

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

 

 

Animation Frames

Animation Frames은 request Animation Frame과 같이 브라우저 렌더링과 관련되 task를 넘겨받는 Queue이다. 

우선순위는 Microtask보다 낮고 (Macro)Task보다는 높다.

 

 이벤트 루프가 비동기 작업을 처리하는 우선순위는 Microtask Queue -> Animation Frames -> Task Queue 순이다.

또한, 이벤트 루프는 Microtask Queue나 Animation Frames를 방문할 떄는, 큐 안에 있는 모든 작업들을 수행하지만, Task Queue를 방문할 때는 한 번에 하나의 작업만 Call Stack으로 전달하고 다른 Queue를 순회한다.

 

 

 

참고 자료

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

JavaScript Visualized: ⭐️🎀 Promises & Async/Await

Tasks, microtasks, queues and schedules