[TIL] 210728 오늘 공부는 콜백큐의 종류(마이크로태스크큐, 태스크큐)와 우선순위

콜백큐(Callback Queue)

- 콜백큐란 자바스크립트 런타임 환경에서 처리해야하는 명령어를 임시로 저장하는 대기 큐로 비동기적으로 실행된 콜백함수가 보관되는 영역이다. 예를들어 setTimeout에서 타이머 완료 후 실행되는 함수, addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수들이 보관된다. 

 

큐(Queue)

- 컴퓨터의 기본적인 자료 구조 중 한 가지로, 먼저 집어 넣은 데이터가 먼저 나오는 FIFO(First In First Out) 구조로 저장하는 형식

 - 콜백이 큐(Queue) 형태로 쌓인다. 선입선출(FIFO) 구조이다. 콜백큐는 하나인 것 처럼 보이지만 사실 여러개로 구성되어있다.
 🧡Task Queue(Event Queue) 태스크 큐, Microtask Queue 마이크로 태스크 큐가 있다. 

 

🌟콜백함수를 태스크 큐에 넣는 함수

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

 

🌟콜백함수를 마이크로태스크 큐에 넣는 함수

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

 

마이크로태스크 큐와 태스크 큐의 우선순위

 

마이크로태스크가 우선순위에 있다. 이벤트 루프는 마이크로태스크 큐의 모든 태스크를 처리한 다음에, 태스크 큐의 태스크들을 처리한다. 따라서 Promise 콜백함수는 setTimeout()의 콜백함수보다 먼저 처리된다.

 

console.log('콜 스택!');
setTimeout(() => console.log('태스크 큐!'), 0);
Promise.resolve().then(() => console.log('마이크로태스크 큐!'));

 

 

 1. 위의 코드를 순서대로 정리해보자면, 최초의 console.log는 처음 스크립트가 로드될 때, "스크립트 실행" 이라는 태스크가 먼저 태스크 큐에 들어간다. 그 후 이벤트 루프가 태스크 큐에서 해당 태스크를 콜스택에 넣는다. 콜스택에서 스크립트 실행이라는 태스크를 실행하면 전역 실행 컨텍스트에 속한 코드가 실행된다. 

 2. console.log(콜스택)이 찍히고 나면, setTimeout이 콜스택으로 들어가고 브라우저의 Web API가 이를 받아 타이머를 동작시킨다.

3. 타이머가 끝나면 setTimeout 콜백함수를 태스크 큐에 넣는다.

4. Promise가 콜스택으로 가고, 콜백함수를 마이크로태스크 큐에 넣는다.

5. 이벤트 루프는 콜스택이 비었는지 확인한 후, 마이크로태스크큐의 가장 오래된 Promise 콜백함수를 콜스택에 넣는다. 

6. Promise의 콜백함수가 끝나고 태스크 큐의 가장 오래된 setTimeout()의 콜백함수를 콜스택에 넣는다. 

7. setTimeout의 콜백함수가 끝나면 콜스택이 비면서 종료된다.  

 

즉, 요약하면 이렇다.

 

비동기 함수가 실행되면, Web API가 호출된다. Web API는 비동기 함수의 콜백함수를 콜백큐에 넣는다. 비동기 콜백에 따라 Promise는 마이크로태스크 큐로, setTimeout은 태스크 큐로 가게된다. 이벤트 루프는 Call stack이 비어있는지 확인하고, 마이크로 태스크 큐에 가장 오래 담겨있던 콜백함수를 콜스택으로 보낸다. 콜스택이 비었다면 그 후에 태스크 큐를 확인하여 콜백함수를 콜스택으로 밀어넣는다. 

 

Animation Frames 이라는 것도 있다. 

requestAnimationFrame API가 실행되면 콜백이 Animation Frames으로 담긴다. Animation Frames을 포함한다면 콜스택에 담기는 우선순위는 크롬기준으로 아래와 같다는 것 까지만 오늘은 알아두자. 

Microtask Queue > Animation Frames > Task Queue 

 

---

 

참고 블로그

 

https://baeharam.netlify.app/posts/javascript/JS-Task%EC%99%80-Microtask%EC%9D%98-%EB%8F%99%EC%9E%91%EB%B0%A9%EC%8B%9D