TIL 2022-11-08 queueMicrotask와 Task

function myFunc1() {
  setTimeout(() => {
    console.log("time");
  }, 0);
  myFunc2();
  Promise.resolve().then(() => {
    console.log("promise");
  });
  console.log("bye");
}

function myFunc2() {
  console.log("hello");
}

myFunc1();

자바스크립트의 이벤트 루프에서 사용하는 태스크 큐는 사실 Microtask와 Macrotask로 나누어져있다.

 

위의 예제에서 순차적으로 time -> promise가 찍혀야할거 같지만 실제로는 promise가 먼저 찍힌다.

 

promise는 마이크로큐로 macro queue인 setTimeout보다 우선순위가 높기 떄문에 먼저 처리하기 떄문이다.

 

MacroTask는

 

setTimeout

setInterval

setImmediate

I/O

UI Render

 

Microtask는

 

Promise

process.nextTIck

Object.observe

MutationObserver가 있다.

 

 

 

그리고 queueMicrotask를 통해 마이크로큐에 태스크 콜백을 넣을수 있다

 

 

MDN 문서의

 

우선, 매번 태스크가 종료될 때마다 이벤트 루프는 이 태스크가 다른 JavaScript 코드로 통제권을 넘기는지 확인합니다. 그렇지 않은 경우 마이크로태스크 큐의 모든 마이크로태스크를 처리합니다. 곧 마이크로태스크 큐는, 이벤트 처리와 기타 콜백 실행 이후마다, 즉 이벤트 루프의 한 주기에 여러 번 처리됩니다.

라는 말이 잘 이해가 되지 않았는데,

 

곰곰히 생각해보니

 

현재 처리하는 태스크가 콜백을 호출하여 호출한 콜백을 처리하는 것을 통제권을 넘긴다고 표현한거 같은데.... 애매해서 Stackoverflow에 물어봄

 

 

 

 

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

Tasks, microtasks, queues and schedules

https://meetup.toast.com/posts/89

자바스크립트와 이벤트 루프 : NHN Cloud Meetup