Javascript event Loop

자바스크립트 엔진은 싱글 스레드로 동작하며,
비동기 및 논블로킹 처리는 브라우저나 Node.js와 같은 host 환경이 제공하는 API(Web APIs, libuv)를 통해 이루어진다.
이 과정에서 host 환경은 내부적으로 멀티 스레드를 활용하여 작업을 처리하고,
완료된 작업의 콜백은 Queue에 들어가고, Event Loop가 이를 Call Stack으로 이동시킨다.

Javascript는 다음과 같은 순서로 실행된다.

[ Call Stack ] → [ Web APIs ] → [ Queue ] → [ Event Loop ] → [ Call Stack ]
비동기로 Web API에서 수행하던 Callback은 QUEUE로 들어오고 이때 Event Loop가 Call Stack이 비어있는 경우를 감지하여 Call Stack으로 옮겨준다.

Event Loop는 Call Stack이 비어있는지 확인하고,
실행 가능한 작업을 Queue에서 꺼내 Call Stack으로 이동시키는 역할을 한다.
이 과정에서 Microtask Queue를 우선적으로 처리한다.

Queue에서도 중요한 점이 있다.
Microtask, Task Queue로 나뉘어 지는데 Microtask Queue를 처리하며 전부 비우고, 다음으로 Task Queue를 처리한다.
이 것을 Task Queue가 비워질 때까지 "Task Queue를 하나씩" 반복 처리하게 된다.
또한, Microtask가 과도하게 쌓일 경우 Task Queue 실행이 지연되어 렌더링이 늦어질 수 있다.

Call Stack에 들어가는 것:

• 함수 호출
• 함수 실행 컨텍스트
• 전역 실행 컨텍스트

Web APIs 목록

MDN Web APIs

🟦 DOM / UI
* document
* Element
* querySelector
* addEventListener
* MutationObserver

🟦 네트워크 / 통신
* fetch
* XMLHttpRequest
* WebSocket
* EventSource (SSE)

🟦 타이머 / 스케줄링
* setTimeout
* setInterval
* clearTimeout
* clearInterval
* requestAnimationFrame

🟦 스토리지 / 데이터
* localStorage
* sessionStorage
* IndexedDB
* Cookies

🟦 브라우저 정보 / 제어
* navigator
* location
* history
* screen

🟦 멀티스레드 / 비동기 처리
* Web Workers
* SharedArrayBuffer
* Atomics

🟦 미디어 / 디바이스
* getUserMedia (카메라/마이크)
* Geolocation API
* MediaRecorder
* AudioContext

🟦 파일 / 데이터 처리
* FileReader
* Blob
* FormData
* URL.createObjectURL

🟦 기타
* IntersectionObserver
* ResizeObserver
* Notification
* Clipboard API

Front 개발을 하면서 JS에 있겠거니 했던 정보들이지만 브라우저 환경에서 제공하는 API들과 구분해야 하는 점이 있고, Node.js로 서버를 개발할 때 DOM API가 없기 때문에 HTML 파서 라이브러리를 활용해야하는 것을 떠올려 본다면,
UI, 통신, 타이머, 미디어, 파일, 스토리지, 브라우저정보 등이 있고 Javascript 언어에서 제공하는 것이 아닌 호스트 환경에서 제공되는 API라는 점을 알 수 있다.

MDN Javascript Event Loop 이벤트 루프

JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다.

논 블로킹

다른 많은 언어와 달리 JavaScript는 절대 블로킹 연산을 하지 않습니다. 논 블로킹은 이벤트 루프 모델의 무척 흥미로운 특징으로, 대부분의 입출력 처리가 이벤트와 콜백을 통해 수행되므로, 애플리케이션이 IndexedDB 질의나 XHR 요청의 반환을 대기 중이더라도, 여전히 사용자 입력 등 다른 것들을 처리할 수 있는 것입니다.

alert이나 동기적 XHR과 같은 레거시 예외가 존재하긴 하지만 사용하지 않는 것이 좋습니다. 물론 예외에 대한 예외는 조심하세요(그러나 이런 예외는 구현체의 버그인 경우가 많습니다).

JavaScript Visualized: Event Loop Youtube
참고된 주요 블로그 lydiahallie

1차 정리분입니다.
이해도가 오를 때마다 좀 더 쉽게 업데이트 하겠습니다.