JavaScript

Task Queue(Macro: 매우큰 거대 task: 작업 Queue

 - 우리가 기존에 알고 있던 Task Queue는 뒤에서 설명할 Microtask Queue과 구분하기 위해 Macrotask Queue라고

   부른다.

 - 이 큐는 setTimeout(), setInterval(), setImmediate()와 같은 task를 넘겨 받는다.

Micro: 마이크로 , 미소한, 초소형의 뜻을 나타내는 말 task Queue

 - Microtask Queue는 Promise나 async/await, process.nextTick, Object.observe, MutationObserver과 같은

   비동기 호출을 넘겨 받는다. // Mutation : 돌연변이 Observer 관찰자

 - Microtask의 우선순위는 일반 task( 또는 Macrotask)보다 더 높다.

// 1. 실행
console.log('script 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('script end')

script start
script end
promise1
promise2
setTimeout

 - Promise 비동기 호출을 하면 해당 작업은 Microtask Queue에 쌓이게 된다.

 - Microtask는 setTimeout과 같은 일반 Task보다 높은 우선순위를 가지고 있어 Promise함수의 내용이 setTimeout

   함수의 내용보다 더 먼저 출력된다.

Promise

Promise가 Microtask Queue로 전달되는 과정

Async/ Await

Async/ Await이 Microtask Queue 로 전달되는 과정

• myFunc 함수 안의 두번째 줄이 실행될 때 one함수는 콜 스택에서 pop되어 promise를 반환한다.
• promise가 반환될 때 마주하는 것은 await 키워드 인데, 이 경우 async 함수의 실행은 미뤄진다.
• 그리고 async 함수의 나머지 부분들을 실행하는 것은 microtask Queue로 넘겨진다.

 

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

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

---

 

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