[js] 콜백 큐의 종류에 따른 우선순위!

Microtask Queue 는 Task Queue 보다 우선순위가 높다.

💡 먼저, 일반적인 스크립트 (ex: console.log ) 가 Task Queue 에 들어갔다가 Call Stack 에서 실행됨. 그 다음 비동기 함수들이 백그라운드를 거쳐 각 함수에 알맞는 큐 (Task Queue Microtask Queue) 에 들어가게 됨.

 

💡 Macro Task Queue 는 Task Queue 와 동일한 용어이고, PromiseJobs Queue 는 Microtask Queue 와 동일한 용어임.

 

• Microtask Queue 는 일반적인 Task Queue 보다 더 높은 우선순위를 가지고 있음.
• 그렇기 때문에 Task Queue 에 대기중인 것이 있다고 하더라도 Microtask Queue 에 있는 것이 우선해서 실행됨.
• 이 때문에 Microtask Queue 에서 시간이 오래 걸릴 경우, 렌더링이 느려지는 현상이 발생할 수도 있음. → 렌더링 엔진은 일반 태스크에 있으므로 작동하지 못하기 때문임!
• 결과적으로, 이벤트 루프는 우선적으로 Microtask Queue 를 확인함. 만약 Microtask Queue 에 콜백이 있다면, 이를 먼저 Call Stack 에 담음. ******그리고 Mircotask Queue 에 더 이상 처리해야할 콜백이 없다면, Task Queue 를 확인 후 처리하는 방식으로 이루어짐.

 

 

Task Queue 와 Microtask Queue 의 차이

• 2개의 큐 모두 콜백 함수가 들어간다는 점에서 동일함.
• 단, 어떤 함수를 실행하느냐에 따라 어디로 들어가는지가 달라짐.
  • Task Queue 에 넣는 함수
    • setTimeout setInterval setImmediate requestAnimationFrame I/O UI Rendering
  • Microtask Queue 에 넣는 함수
    • process.nextTick Promise Object.observe MutationObserver
• 마이크로태스트 큐는 태스크 큐와는 별도의 큐이며 마이크로태스크 큐에는 프로미스의 후속 처리 메서드의 콜백 함수가 일시 저장됨. 그 외의 비동기 함수의 콜백 함수나 이벤트 핸들러는 태스크 큐에 일시 저장됨.

 

 

 

이벤트 루프 중 어떤 시점에서 런타임은 대기열에서 가장 오래된 메시지부터 처리하기 시작한다.

Callback Queue 란?

💡 자바스크립트 코드가 실행되는 환경을 런타임이라고 일컫음.

 

• 자바스크립트 런타임은 처리할 메시지 목록인 메시지 대기열을 사용하는데, 이를 Callback Queue 라고 함.
• 각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있음.
• Callback Queue 의 내부에는 여러 가지의 큐들이 담겨있으며, 대표적인 큐로는 Microtask Queue , Animation Frames , Task Queue 가 있음.

 

Callback Queue 함수 호출 방식

- 선입선출 (FIFO) 방식을 따르기 때문에 대기열에서 가장 오래된 메시지부터 처리함.

 

 

 

setTimeout 에 인자로 넘겨진 콜백 함수는 실제로 0ms 가 아닌 최소 4ms 후에 실행된다.

아래 코드의 출력 순서는 B → C → A 임.

setTimeout(function() { 
		// (A)
    console.log('A');
}, 0);
Promise.resolve().then(function() { 
		// (B)
    console.log('B');
}).then(function() { 
		// (C)
    console.log('C');
});

• Promise 인 B, C 가 setTimeout 보다 먼저 실행됨.
• setTimeout 인 A 가 일반 태스크 큐를 사용하는 반면, Promise 인 B 는 마이크로 태스크 큐를 사용함. → 마이크로 태스크 큐는 일반 태스크 큐보다 더 높은 우선순위를 갖기 때문에 태스크 큐에 먼저 대기중인 태스크가 있더라도 마이크로 태스크가 먼저 실행됨.

 

그렇다면 setTimeout 의 호출 시간은 왜 다를까?

💡 브라우저 환경에서 실제 대기 시간은 0이 아닙니다. 브라우저는 HTML5 표준에서 정한 중첩 타이머 실행 간격 관련 제약을 준수합니다. 해당 표준엔 "다섯 번째 중첩 타이머 이후엔 대기 시간을 최소 4밀리초 이상으로 강제해야 한다."라는 제약이 명시되어있습니다.

 

• 위의 A 는 4ms 이후 실행된 것으로 예측할 수 있음.
• 브라우저는 내부적으로 타이머의 최소단위(Tick)을 정하여 관리하기 때문에, 실제로는 그 최소단위만큼 지난 후에 태스크 큐에 추가되게 됨.
• 이 최소단위는 브라우저 별로 조금씩 다른데, 크롬 브라우저의 경우 최소단위로 4ms를 사용하기 때문에 크롬에서 setTimeout(fn, 0) 은 setTimeout(fn, 4) 와 동일한 의미를 갖게 됨.