[JS/JavaScript] 자바스크립트 콜백큐 (Callback Queue)란?

지난번 자바스크립트의 동작원리를 설명할때 "CallBack Queue"를 잠시 설명했습니다.

간단하게 설명하면 WebAPIs에 있는 비동기처리를 Stack에 보내기전 머무르는 영역입니다.

 

우리가 알고있는 큐는 FIFO구조로 First in First out으로 먼저들어간게 먼저 나오는 구조입니다.

일상 생활에서 일차선 터널이라고 생각하면 쉽게 생각할수 있습니다.

 

하지만, 지난번 설명한 CallBack Queue는 FIFO구조가 아닙니다.

사실 CallBack Queue는 3가지로 나누어 관리 되고 있습니다.

1. Task Queue(Event Queue)

2. Micro Task Queue(Job Queue)

3. Animation Frame

 

여기에도 우선순위가 있는데, 크롬 기준 다음과 같은 우선 순위가 존재합니다.

Micro Task Queue(Job Queue) > Animation Frame > Task Queue(Event Queue)

 

그럼 하나하나 알아보도록 할께요.

함수를 다룰것이 아니기 때문에 설명은 하지않겠습니다.

 

반응형

setTimeout과 promise가 WebAPIs에 있고 이것이  CallBack Queue로 갔다면

/**CallBack Queue**/

setTimeout
promise

하나의 CallBack Queue에 들어있는것이 아닌

--------/**CallBack Queue**/--------



	--------/*Task Queue*/--------
		setTimeout
    ------------------------------
    
    
	-----/*Micro Task Queue*/-----
		promise
    ------------------------------
    

	------/*Animation Frame*/------
		promise
    ------------------------------


-------------------------------------

위와 같이 함수마다 각자의 Task Queue로 들어가게 됩니다.

 

그럼 Event Loop는 우선순위가 가장 높은 Micro Task Queue에 있는 모든 내용을 처리한후, Animation Frame을 처리하고, 마지막으로 Task Queue에 있는 내용을 처리한다.

 

Task Queue 에는 하나의 함수가, Micro Task Queue에는 10개의 함수가 존재해도, 10개의 함수를 다 처리한후 Task Queue에 있는 함수를 처리한다.