자바스크립트 엔진
자바스크립트 엔진은 메모리 힙 과 콜 스택 으로 구성되어 있다.
-
Memory Heap : 메모리 할당이 일어나는 곳 (선언한 변수, 함수 등이 담겨있다)
-
Call Stack : 코드가 실행될 때 쌓이는 곳 (자료구조 스택 형태로 쌓인다)
가장 마지막에 들어온 함수가 먼저 실행된다.
가장 유명한 것은 V8 엔진이다.
자바스크립트는 싱글 스레드 (단일 스레드) 프로그래밍 언어다. (= 콜 스택 이 하나다)
즉, 멀티가 되지 않고 하나씩 처리한다.
하지만 Web API, Callback Queue, Event Loop 덕분에 멀티 스레드 처럼 보여진다.
Web API
Web API는 자바스크립트 엔진이 아니고, 브라우저에서 제공하는 API로 DOM, AJAX, SetTimeout 등이 있다.
Callback Stack 에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue 에 넣는다.
Callback Queue
비동기적으로 실행된 콜백함수가 보관되는 곳이다.
예)
addEventListener의 두번째 인자, setTimeout 타이머 완료 후의 콜백
** 스택은 선입후출(LIFO), 큐는 선입선출(FIFO)
Event Loop
Call Stack 과 Callback Queue 의 상태를 체크하여 Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 넣어준다. 이렇나 행동을 tick이라고 한다.
Microtask Queue
이벤트루프는 Call Stack 과 Callback Queue 의 상태를 체크하여 콜스택이 빈 상태가 되면 콜백큐의 첫번째 콜백을 콜스택으로 넣어준다고 했다.
하지만 사실 이벤트루프는 Microtask Queue 를 먼저 확인한다.
만약 Microtask Queue 에 콜백이 있다면, 이를 먼저 Call Stack 에 담는다.
만약 Microtask Queue 에 콜백이 없다면 Task Queue 에 확인 후 처리한다.
예)
Promise .then 콜백은 Microtask Queue 에 담긴다.
Animation Frames
requestAnimationFrame API가 실행되면 콜백은 Animation Frames 에 담긴다.
Microtask Queue 에 콜백이 있다면, 이를 먼저 Call Stack 에 담는고, 더이상 처리할 콜백이 Microtask Queue 에 없으면 Task Queue를 확인한다고 했는데,
사실은 Microtask Queue 를 확인하고, Animation Frames 에 콜백이 있다면 그걸 처리한 후에 Task Queue를 확인한다.
Microtask Queue -> Animation Frames -> Task Queue
정리
V8 엔진에서 코드가 실행되면 콜스택에 쌓이는데,
콜스택에서 선입후출 방식대로 가장 마지막에 들어온 함수가 가장 먼저 실행된다.
이때 비동기 함수가 실행되면 Web API가 호출되고,
Web API는 비동기함수의 콜백함수를 콜백 큐에 넣어준다.
Promise 는 Microtask Queue로,
setTimeout은 Task Queue로,
RequestAnimationFrame은 Animation Frame으로 콜백함수를 넣는다.
이벤트 루프는 콜스택이 빈 상태가 되면,
콜백 큐에 있는 첫번째 콜백을 콜스택으로 이동시켜준다.
콜백 이동 우선순위는 Microtask Queue -> Animation Frames -> Task Queue 이다.
자바스크립트는 싱글 스레드 기반 언어다.
(싱글 스레드 = 한 번에 하나의 태스크만 실행할 수 있다.)
함수 호출이 스택에 순차적으로 쌓이고 스택의 맨 위부터 아래로 한 번에 하나의 함수만 처리 할 수 있다.
이벤트 루프 : 자바스크립트의 동시성 (concurrency)를 지원해준다 (동시에 일어나는 것처럼 보이게 해준다). 콜 스택이 비었는지, 태스크 큐에 비동기로 동작하는 태스크가 있는지 반복적으로 확인하고, 콜스택이 비었다면 이벤트 큐 내의 작업을 콜스택으로 이동시켜서 실행한다.
태스크 큐 : 콜백함수들이 대기하는 큐
마이크로 태스크 큐 : 태스크 큐보다 우선 순위가 높아 이벤트 루프는 콜스택이 비면 먼저 마이크로태스크큐에 대기중인 함수를 가져와 우선적으로 콜스택에 추가한다. (Promise 후속 처리 메서드 .then 이 마이크로 태스크 큐에 들어간다)
참고
https://velog.io/@thms200/Event-Loop-이벤트-루프#event-queue-job-queue
