[자바스크립트] 마이크로 태스크 큐와 프로미스

이전 글

[자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리

---

마이크로 태스크 큐?

태스크 큐 포스팅에서 태스크 큐를 알아봤다.

 

태스크 큐는 이벤트 루프와 함께 비동기 작업을 돕기 위해 만들어졌으며, 실행할 콜백함수가 대기하는 큐다.

이벤트 루프가 콜스택이 비어있을 때 태스크 큐에서 콜백을 가져온다.

 

하지만, 이벤트 루프가 태스크 큐에서 콜백을 가져오기 전에 먼저 고려하는 것이 있다.

이것이 마이크로 태스크 큐다.

https://velog.io/@yejineee/이벤트-루프와-태스크-큐-마이크로-태스크-매크로-태스크-g6f0joxx

환상적인 그림을 발견해서 가져와봤다.

 

마이크로 태스크 큐가 더 우선순위를 가진다. OK!

근데 비동기 작업보다 우선이라고..? 대체 뭐가 담기는 걸까?

---

마이크로 태스크 큐에 담기는 작업

프로미스의 결과를 다루는 then, catch, finally 역시 비동기적으로 실행된다고 했다.

이 프로미스 콜백과 후속 처리 메서드인 then, catch, finally의 콜백함수들이 마이크로 태스크 큐에 저장된다.

즉 "프로미스"가 마이크로 태스크큐에 담긴다.

(= 엄밀히 말하면 조금 더 있기는 하다.)

 

마이크로 태스크 큐에 담긴 프로미스 콜백이 태스크 큐에 대기중인 콜백보다 우선적으로 처리된다.

 

간단한 예시를 통해 진짜인지 알아보자.

setTimeout(() => console.log("SetTimeOut!"), 0);

Promise.resolve()
  .then(() => console.log("Promise then1"))
  .then(() => console.log("Promise then2"));

console.log("There!");

 

태스크 큐만을 생각하고 출력 순서를 예측해보면

There! / SetTimeOut! / Promise then1 / Promise then2 순으로 출력될 것이다.

 

setTimeout과 2개의 then 작업은 비동기 작업이다.

실행컨텍스트에서 실행한 즉시 pop되면서 이벤트루프에 던져지겠다.

 

맨 마지막 코드 console.log("There"); 까지 실행된 이후에는

태스크 큐에 담긴 순서대로 SetTimeOut! then1 then2가 출력되는 것을 예측할 수 있다.

 

 

그러나, 우린 마이크로 태스크 큐의 존재를 알게되었다

Promise의 then에 전달된 콜백이 마이크로 태스크 큐에 담겼고 setTimeout 콜백보다 먼저 실행된다.

 

 

코드 실행 순서를 살펴보면 아래와 같다.

 

1. 전역 실행 콘텍스트가 콜스택에 푸시된다.

2. setTimeout 함수 실행 콘텍스트가 콜스택에 푸시되고 바로 팝되며, 비동기 작업 실행이 브라우저에 의해 처리된다.

3. Promise와 관련된 실행 콘텍스트 역시 콜스택에 푸시되고 바로 팝되며, 2개의 then에 대해서 브라우저가 따로 처리한다.

4. console.log("There!")의 실행 콘텍스트가 콜스택에 푸시되고 결과를 출력한 후 바로 콜스택에서 팝된다.

5. 현재 태스크 큐에는 setTimeout의 콜백함수, 마이크로 태스크 큐에는 2개의 then 콜백함수가 들어있다.

6. 더이상 실행할 코드가 없다. 전역 실행 콘텍스트가 콜스택에서 팝되고, 이제 콜스택은 비어있다.

7. 이벤트 루프가 콜스택이 비어있음을 감지한다. 태스크 큐에 있는 콜백함수를 콜스택으로 가져올 차례다.

7-1. 그 전에 마이크로 태스크 큐를 먼저 들린다. 마이크로 태스크 큐에 있는 2개의 then 콜백 함수를 차례대로 콜스택에 가져와 처리한다.

7-2. 마이크로태스크큐에서 가져온 콜백 실행이 끝나고, 태스크 큐에 타이머함수 콜백을 가져와 처리한다.

 

결국 위에서의 출력을 볼 수 있다.

 

이처럼 비동기 작업을 수행할 때

프로미스는 마이크로 태스크 큐를 통해 더 높은 우선순위를 가진다는 것을 알게 되었다.

 

마지막으로 Async Await을 익히면 당신은 슈퍼비동기쟁이(?)가 될 수 있다.

---

참고한 사이트

https://ko.javascript.info/microtask-queue

 

---

마지막 이어지는 글

[자바스크립트] 비동기 작업의 동기 처리를 위한 Async/Await

 

마이크로 태스크 큐에서 작업을 처리하는 방식을 자세하게 알고 싶다면?

[자바스크립트] 마이크로 태스크 큐의 비동기 작업 처리와 렌더링 시점을 알아보자.