Event Loop, Web APIs, (Micro)task Queue

JavaScript

presentKey 2024. 6. 15. 01:07

자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 스레드이다. 이는 한 작업을 처리하는데 시간이 오래 걸린다면 프로그램이 멈추는 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

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

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

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