구조 #

JS 엔진 #

JS 코드를 기계어로 변환하는 모듈로 힙 메모리(memory heap)와 콜 스택(call stack)으로 구성됩니다.

콜 스택은 실행 중 생성된 실행 컨택스트(execution context)들이 LIFO(Last In First Out) 방식으로 대기하는 스택 공간이고, 힙 메모리는 동적할당을 위한 큰 메모리 공간으로 다양한 객체들이 저장됩니다.

힙 메모리에 위치한 각종 객체나 함수들을 참조하여 콜 스택의 top에 위치한 context를 동기적으로 처리하고, 반환된 context는 콜 스택으로부터 pop합니다.

Web API #

JS 엔진이 이용할 수 있는 브라우저 API로, mulit-thread 환경을 모방하기 위한 Web Workers API, 웹 페이지를 객체 단위로 접근하기 위한 DOM API, 힙 메모리를 제외하고 브라우저에 데이터를 저장하기 위한 Web Storage API 등이 있습니다.

context 내의 AJAX 요청, timebased 이벤트, DOM 이벤트 등의 비동기 작업들은 Web Workers API에 의해서 처리됩니다.

MicroTasks Queue #

Web Workers API로 처리된 settled promise들이 대기하는 queue 공간입니다.

Callback Queue #

Web Workers API에 의해서 전달된 콜백함수 context들(settled promise를 제외한)이 대기하는 queue 공간입니다.

Event Loop #

콜 스택에서 context 실행간에 break가 있거나 스택이 빌 때마다 MicroTasks -> Callback 순으로 콜백함수 context를 dequeue하여 콜 스택에 push합니다.

메인 스레드가 담당하는 동기적 작업과 비동기적 작업의 처리시점을 정하기 때문에 JS의 동시성 모델의 핵심 요소라고 볼 수 있습니다.