마이크로태스크 큐, 태스크 큐

마이크로태스크 큐, 태스크 큐

지난 번 이벤트 루프에 대해서 살펴볼 때,
자바스크립트에서 콜백함수가 처리되는 과정을 확인했다.

위의 그림과 같이, 콜백함수는 Callback Queue라는 곳을 거치는데
사실 두 종류의 마이크로태스크 큐와 태스크 큐로 나뉘어서 작업을 진행한다.
해당 큐에 대해 자세히 알아보자.

마이크로태스크 큐와 태스크 큐는 무엇인가?

• 두 가지의 큐는 동일하게 콜백함수를 처리한다는 공통점이 있다.
• 하지만 일반적인 큐처럼, FIFO(First In Firt Out) 동작을 하지 않고,
  우선순위 큐(Priority Queue)에 따른 우선순위가 높은 순서가 먼저 처리되는 동작을 진행한다.

  결과적으로, 콜백함수를 어떤 큐에 넣느냐에 따른 우선순위 우선 처리 작업이 진행된다!

---

태스크 큐에 들어가는 콜백함수

• setTimeout()
• setInterval()
• setImmediate()
• requestAnimationFrame
• Input/Output
• UI 렌더링

마이크로태스크 큐에 들어가는 콜백함수

• process.nextTick
• Promise
• async/await
• Object.observe
• Mutation Observer

---

마이크로태스크 큐와 태스크 큐 중, 누가 먼저인가?

이벤트 루프는 콜백함수를 처리하기 위해, 두 개의 큐에서 꺼내서 넘긴다.
그렇다면, 누가 먼저인가?

우선순위: 마이크로태스크 큐 > 태스크 큐

따라서, 마이크로태스크 큐의 작업이 모두 처리되고 나서, 태스크 큐의 작업이 처리된다.

---

작업 예시

예제

console.log('일반적인작업');
setTimeout(() => console.log('태스크큐작업'), 0);
Promise.resolve().then(() => console.log('마이크로태스크큐작업'));

결과

일반적인작업
마이크로태스크큐작업
태스크큐작업

---

✨ 출처

blog, Task와 Microtask의 동작방식

---