비동기처리 작동 원리, Microtask Queue & Task Queue

Q:  JS에서의 비동기처리의 작동 원리를 알고있나?

 

A

JS의 런타임에 메모리 할당을 담당하는 메모리 힙과 코드가 호출될 때 스택으로 쌓이는 콜스택이 있고, 콜스택은 후입선출 방식으로 실행됩니다.

JS 작동 원리에서 비동기 함수일 경우를 설명해보자면 SetTimeOut이라는 함수가 콜백함수를 가지고 호출되어 콜스택에 쌓이면 이 함수는 Web API를 호출하는 함수라서 얘가 실행되는 순간 Web API의 타이머를 호출합니다.
그 후, 타이머가 SetTimeOut의 콜백함수를 가지고 Web API에 등록을 하고 콜스택에 있는 SetTimeOut 함수는 어찌됐든 실행완료가 되었기 때문에 콜스택에서 빠져나갑니다.

이어서 다음 줄의 코드들을 콜스택에 넣고 할일을 이어서 합니다. 그리고 타이머가 가지고 있는 콜백함수는 인자에 있는 해당 초만큼의 시간이 지나면 타이머가 Callback Queue로 이 콜백함수를 넘겨주고 Event Loop는 콜스택과 콜백큐를 항상 지켜보고 있다가 콜스택이 비어있을 때, 콜백큐에 있는 이 함수를 콜스택으로 넘겨주어 콜스택에 해당 콜백함수 스택이 쌓이고 그 스택 위에는 이 콜백함수를 실행을 해야하므로 이 함수를 실행 한 스택이 쌓이게 됩니다.

 

Q: JS가 비동기 처리가 가능한 이유? 멀티스레드가 가능한 이유? 

 

A

자바스크립트 언어는 기본적으로 싱글스레드 언어지만 런타임이 가지고 있는 Web API를 활용해서 멀티스레드와 같이 동기와 비동기 작업을 분류하여 진행하는 작업들을 수행할 수 있게 되어서 싱글스레드이지만 논블로킹이 가능한 이유입니다.

Web API ( DOM / AJAX / Timeout ) : 브라우저에서 가지고있고 Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 밀어 넣는다.

 

---

 

Q:  Microtask Queue VS Task Queue  [ 큐에도 순서가 있다 ]

 

A

 

이벤트 루프가 스택에서 처리할 작업이 없을 경우 우선적으로는 Microtask Queue를 확인하고, Microtask Queue에 작업이 있다면
Microtask에 있는 작업을 꺼내서 콜스택에 넣고 만약 비어서 더 이상 처리할 작업이 없으면 그때 Task Queue를 확인하고 콜스택에 넣습니다.

• 비동기 작업으로 등록되는 작업은 task와 microtask, animationFrame 작업으로 구분된다.
• microtask는 task보다 먼저 작업이 처리된다.
• microtask가 처리된 이후 RequestAnimationFrame이 호출되고 이후 브라우저 렌더링이 발생한다.

Task
task는 비동기 작업이 순차적으로 수행될 수 있도록 보장하는 형태의 작업 유형입니다. 순차적으로 보장한다는 의미는 Task 사이에 브라우저 렌더링과 같은 작업이 일어 날 수 있기 때문에 Task 다음에 바로 다음 Task가 실행된다는 의미보다는 작업이 예약되어있는 순서를 보장한다는 의미가 더 적합합니다.
• setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링

Microtask
microtask는 비동기 작업이 현재 실행되는 스크립트 바로 다음에 일어나는 작업이고 Task보다 항상 먼저 실행됩니다.
• process.nextTick, Promise, Object.observe, MutationObserver