💭 TMI

이전 글을 통해 우리가 자바스크립트에서 어떻게 비동기 처리를 할 수 있는 지에 대해 알아보았다.
개발자의 관점에서 비동기 코드를 어떻게 처리하는 지에 대해 알아봤다면 이번 글에는 브라우저가 내부적으로 어떻게 비동기 처리를 하는 지 알아보자.

📚 Callstack

이벤트 루프를 이해하기 위해선 자바스크립트의 실행 컨텍스트에 대한 이해가 필요하다.
크롬 브라우저에 사용 중인 V8 엔진이라는 JS엔진을 기준으로 설명하면, JS엔진에는 콜스택과 메모리힙이 존재하는데 코드의 실행순서를 콜스택이 관리한다.

📌 Single Thread

자바스크립트는 싱글 스레드 언어다.
스레드가 1개이므로 1개의 콜스택을 가지며, 한번에 한 가지 작업을 수행할 수 있다.

뭐야 오래걸리는 작업 있으면 뒤에 작업이 계속 밀릴텐데 그럼 느리겠다 ㅋㅋ

비동기 콜백함수가 등장한다.
오래걸리는 작업은 미뤄두고 빨리 처리가 가능한 작업을 먼저 할 수 있다.

근데 콜스택이 1갠데 어떻게 미뤄둠?

⚙️ Web APIs

비동기 처리를 WEB APIs 에 위임한다 !!!

싱글 스레드인 자바스크립트에선 앞에서 말한 것처럼 효율적인 작업 처리가 어렵다. 따라서 비동기 처리, 즉 시간이 오래걸리는 작업을 Web APIs에 위임하면서 브라우저를 사용하는 사용자는 불편함을 느끼지 않는다.

Web APIs 는 멀티스레드 이므로 작업을 병렬적으로 처리할 수 있다. fetch 처리는 네트워크 스레드, timer 처리는 타이머 스레드가 처리하는 등 브라우저에서의 비동기 처리를 도와준다.

[브라우저 비동기 처리 순서]

1. 실행할 함수들이 순서대로 콜스택에 쌓임
2. 비동기 자바스크립트 코드는 멀티스레드인 Web APIs가 실행
3. 작업이 끝난 결과를 콜백 함수 형태로 Callback Queue에 넣음
4. 콜스택이 비면 이벤트루프가 Callback Queue에 있는 함수들을 콜스택에 넣어서 실행

🙆‍♂️ Event Loop

브라우저 동작을 제어하는 관리자 역할

Callback Queue에 함수가 존재하고 콜 스택이 비었다면,
Callback Queue에서 콜백을 꺼내 콜 스택에 넣어주는 역할을 한다.
Callback Queue에 함수가 존재하는 지, 콜스택이 비었는 지를 체크하며 각각의 상황에 맞게 브라우저의 동작을 제어한다.

📦 Callback Queue

[ Callback Queue에는 3개의 queue 존재 ]
1. Task queue (setTimeout, setInterval 등)
2. Microtask queue (Promise.then 등)
3. Animation Frames (requestAnimationFrame 등)

그냥 비동기 처리를 하고 적재하는 용도라면 queue가 1개여도 상관이 없다.
queue가 3개가 존재하는 이유는 작업의 우선순위가 존재한다.

Microtask Queue > Animation Frames > Task Queue

이를 간단한 코드로 확인해보면 setTimeout 이 먼저 실행되었음에도 Promise가 먼저 찍혔다.

setTimeout(() => {
  console.log("setTimeout");
}, 0);
console.log("console");
Promise.resolve("Promise").then((res) => console.log(res));

// console
// Promise
// setTimeout

1. 콜스택에 들어가는 동기코드가 모두 실행된다. (console.log() 등)
2. 코드가 모두 실행되어 전역 컨텍스트가 pop 되면 콜스택이 빈다.
3. 그 때 Task queue에는 setTimeout(), Microtask queue에는 Promise 가 담겨있다.
4. 우선순위에 의해 이벤트 루프는 Promise를 먼저 실행시키고 setTimeout을 실행한다.

이벤트루프 발표 자료
MDN 이벤트 루프