JavaScript의 비동기와 이벤트 루프

📌브라우저의 멀티 스레드로 작업을 동시에

JavaScript는 싱글 스레드 언어로, 한 번에 하나의 작업만 수행이 가능하다. 반면 Java나 Python은 멀티 스레드를 지원하여 원하는 코드 로직을 동시에 수행시키는 멀티 작업이 가능하다.

웹 어플리케이션에서는 네트워크 요청이나 이벤트 처리, 타이머와 같은 작업을 멀티로 처리해야 하는 경우가 많다. 만일 싱글 스레드로 브라우저 동작이 한번에 하나씩 수행하게 되면, 우리가 파일을 다운로드 받을 동안 브라우저는 파일을 다 받을 때까지 웹서핑도 못하고 멈춰 대기해야 한다. 따라서 파일 다운, 네트워크 요청, 타이머, 애니메이션 이러한 오래 걸리고 반복적인 작업들은 자바스크립트 엔진이 아닌 브라우저 내부의 멀티 스레드인 Web APIs에서 비동기+논블로킹으로 처리된다. 비동기+논블로킹(Async+Non blocking)는 메인 스레드가 작업을 다른 곳에 요청하여 대신 실행하고, 그 작업이 완료되면 이벤트나 콜백 함수를 받아 결과를 실행한다. (파일 다운로드 요청 작업을 백그라운드 작업으로 전이하여 동시에 처리가 가능하도록 한 것)

 

📌브라우저의 내부 구성도

브라우저는 웹 사이트를 화면에 보여주기 위해 내부적으로 Web APIs, Event Table, Callback Queue, Event Loop 등이 있다.

콜백 큐에 콜백 함수가 담기고, 이벤트 루프가 돌면서 콜 스택이 비어 있으면 콜백 큐에서 함수를 옮겨 실행한다.

- Call Stack: 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조

- Heap: 동적으로 생성된 자바스크립트 객체가 저장되는 공간

- Web APIs: 브라우저에서 제공하는 API 모음으로, 비동기적으로 실행되는 작업들을 전담하여 처리한다. (AJAX 호출, 타이머 호출, DOM 조작 등)

- Callback Queue: 비동기 함수들을 적절한 시점에 실행시키는 관리자

- Event Table: 특정 이벤트(timeout, click, mouse 등)가 발생했을 때 어떤 callback 함수가 호출되어야 하는지를 알고 있는 자료 구조

 

📌Callback Queue의 종류

Callback Queue에는 (macro)task queue와 microtask queue가 있다. 우선순위는 MicroTask Queue>Task Queue이다.

Task Queue: setTimeout, setInterval, fetch, addEventListener와 같이 비동기로 처리되는 함수들의 콜백 함수가 들어가는 큐

MicroTask Queue: Promise의 .then, .catch, .finally, MutationObserver 콜백 등

console.log('Start!');

setTimeout(() => {
	console.log('Timeout!');
}, 0);

Promise.resolve('Promise!').then(res => console.log(res));

console.log('End!');

1) console.log('Start!');

Call Stack에 console.log("Start!") 코드 부분이 쌓인 뒤 실행되어 콘솔창에 "Start!")가 출력된다.

2) setTimeout

setTimeout 코드가 콜 스택에 적재되고 실행되면, 그 안의 콜백 함수가 이벤트 루프에 의해 Web APIs로 옮겨지고 타이머가 작동하게 된다. 타이머가 종료되면 콜백함수는 Task Queue에 이벤트 루프에 의해 적재된다.

3) Promise

Promise 코드가 콜스택에 적재되어 실행되고, then 핸들러의 콜백 함수가 이벤프 루프에 의해 MicroTask Queue

에 의해 적재된다.

4) console.log('End!')

Promise 코드가 콜스택에 적재되어 실행되고 then 핸들러의 콜백 함수가 이벤트 루프에 의해 MicroTask Queue에 적재된다.

즉, 1>4>3>2의 순서로 실행되는 것이다.