Event Loop, Web APIs, (Micro)task Queue

🏃‍♀️ 자바스크립트는 싱글 스레드

자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 스레드이다. 이는 한 작업을 처리하는데 시간이 오래 걸린다면 프로그램이 멈추는 blocking이 발생할 수 있다.

 

하지만 네트워크 요청, 타이머 등 작업이 발생했을 때, 프로그램이 멈추지 않고 다른 작업들이 실행되는 것을 볼 수 있다. 이는 setTimeout, Promise 등 Web APIs 중 비동기 작업을 자바스크립트 엔진이 아닌 브라우저가 담당하여 처리하기 때문이다.

 

🔥 자바스크립트 런타임 과정

Call Stack: 함수 호출 시 함수 실행 컨텍스트가 콜 스택에 푸시되고 순차적 실행 된다. 실행이 완료되면 콜 스택에서 제거된다.

Web APIs: setTimeout, Promise 등 비동기 작업을 콜 스택에서 가져와 브라우저가 담당하도록 한다.

Task Queue: setTimeout과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

Microtask Queue: 프로미스 후속 처리 메서드 ‘then’, ‘catch’, ‘finally’의 콜백 함수, await 이후 코드 등이 일시적으로 보관되는 영역이다. Task Queue보다 우선순위가 높다.

Event Loop: 콜 스택이 비어있는지, (micro)task queue에 대기 중인 함수가 있는지 확인하여, 대기 중인 함수를 콜 스택으로 이동시킨다.

 

이미지 및 영상 참고
https://www.lydiahallie.com/blog/event-loop
https://www.youtube.com/watch?v=eiC58R16hb8

1. Call Stack에 함수가 푸시되고 순차적으로 실행된 후 제거된다.
2. 만약 비동기 함수 setTimeout 이 푸시되면, Web APIs 영역으로 이동한다.
3. 지정된 딜레이 시간이 지난 후, setTimeout의 콜백함수가 Task Queue 영역으로 이동한다.
4. EventLoop가 콜 스택이 비었는지 확인 후, Task Queue에 대기 중이던 setTimeout의 콜백함수가 Call Stack으로 이동한다.
5. SetTimeout의 콜백함수가 실행된다.

 

👀 염두할 점

Event Loop는 Queue에 대기 중인 함수를 Call Stack이 비어있을 때만 보낸다. 만약 Call Stack이 비어있지 않다면, setTimeout의 지정된 딜레이 시간보다 더 오래 지연될 수 있다.

 

그리고 Microtask Queue가 Task Queue보다 우선순위가 높다. Microtask Queue에 대기중인 함수가 없을때까지 Task Queue의 함수는 Call Stack으로 이동하지 못한다.

 

🧷 참고

https://www.lydiahallie.com/blog/event-loop

https://www.youtube.com/watch?v=eiC58R16hb8

https://dkrnfls.tistory.com/362