macro task queue & micro task queue

이벤트 루프

이벤트 루프란 JS엔진이 아닌, 구동하는 환경(브라우저, 노드)에서 가지고 있는 장치이다.

콜 스택과 태스크 큐(콜백 큐)를 감시하며, 콜 스택이 비어있는 경우에 태스크 큐에서 태스크(콜백 함수)를 가져와 콜 스택에 넣어 실행시키는 기능을 한다.

 

태스크 큐 이외에 마이크로 태스크 큐가 있는데 이는 JS의 promise의 동작 방식과 연관이 있다.

이제 이벤트 루프가 2개의 큐를 통해 각각의 태스크들을 어떻게 핸들링하는지 살펴보자!

 

매크로태스크 큐 & 마이크로태스크 큐

2개의 큐 모두 콜백함수가 들어간다는 점은 동일하다!

 

둘 다 queue라는 키워드가 들어가 있지만 엄밀히 말하면 우선순위 큐라고 할 수 있는데

이벤트 루프가 2개의 큐에서 태스크를 꺼내는 조건이 제일 오래된 순이기 때문이다!

 

 

매크로태스크 큐에 넣는 함수들

 

- setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI렌더링

 

마이크로 태스크에 넣는 함수들

 

- promise.nextTick, Promise, Object.observe, MutationObserver

 

익숙한 함수인 Web API의 setTimeout의 콜백 함수가 태스크 큐에 들어가고

Promise의 콜백함수가 마이크로 태스크 큐에 들어간다는 것을 알 수 있다. 

 

 

그렇다면 이벤트 루프는 어떤 큐를 우선적으로 처리할까?

 

정답부터 말하자면 마이크로태스크 큐이다.

이벤트 루프는 마이크로태스크 큐의 모든 태스크를 처리한 다음 매크로태스크 큐의 태스크를 처리한다.

 

 

실행 순서

동기 함수 > promise > setTimeout 순이 되겠다!