JS 비동기 7편 - job queue

콜백 큐

JS 동작원리 5편 - 런타임 (Event Loop, Callback Queue, 비동기)

콜백 큐에 대한 기본적인 내용을 알고 있다는 전제하에 글 작성을 한다.

콜백 큐에는 세 종류의 큐가 있는데,

Task Queue, Job Queue, Animation Frame이다.

Task Queue

//1 Callback Queue - Task Queue
setTimeout(() => {
  console.log("1");
}, 0); //not js, web api
setTimeout(() => {
  console.log("2");
}, 10);

//3
console.log("4");

setInterval, setTimeout 등이 해당 큐에 속한다.

콜 스택에 담긴 콘솔출력이 4로 먼저 출력되고,

이후에 Task Queue를 실행시킨다.

Job Queue

//1 Callback Queue - Task Queue
setTimeout(() => {
  console.log("1");
}, 0); //not js, web api
setTimeout(() => {
  console.log("2");
}, 10);

//2 Job Queue - Microtask Queue
Promise.resolve("hi").then((data) => console.log("3", data));

//3
console.log("4");

비동기 함수인 promise 또한 콜백 큐에 담기지만 

큐의 종류가 다르다.

콜 스택이 먼저 실행된 후,

promise가 먼저 실행되는 것을 볼 수 있다.

그리고 이후 setTimeout이 실행된다.

 

콜백 큐의 우선순위

위 결과에서 볼 수 있듯이(animation은 이 글에서 다루지 않았지만)

세 개의 큐의 우선순위는

Job Queue >>> Animation Frame >>> Task Queue

가 된다.