JS가 비동기 프로그래밍이 가능하도록 하는 시스템 | Event Loop, Task Queue, Call Stack

배경 지식
: JS 엔진은 1개의 실행 컨텍스트 스택을 갖는다. 따라서 한번에 하나의 task만 실행하는 single thread 방식으로 동작한다.
: 브라우저는 멀티 스레드로 동작한다.

 

event loop

• 브라우저 환경에서 자바스크립트 코드의 실행을 제어하는 메커니즘
• 브라우저는 여러 이벤트들을 감지하고, 이벤트 발생 시에 적절한 콜백 함수를 호출하거나 작업을 큐에 추가한다.
• task queue를 감시하고 있다.

task queue

• JS엔진이 처리해야 할 작업을 순서대로 담아두는 queue
• 주로 이벤트 핸들러, 타이머 콜백, 사용자 정의 비동기 작업이 들어간다.
• 매크로태스크 큐 / 마이크로태스크 큐로 나누어진다.
  1. 매크로태스크 큐(Macrotask Queue)
     1. call stack이 비어있을 때 이벤트 루프를 통해 call stack으로 이동되어 실행된다.
     2. setTimeOut, setInterval, I/O작업, rendering
  2. 마이크로태스크 큐(Microtask Queue)
     1. 매크로태스크 큐보다 높은 우선순위를 가진다.
     2. Promise 콜백 함수, async/await
     3. 현재 실행 중인 매크로 태스크가 완료된 직후 처리되며, 이 처리는 이벤트 루프의 한 사이클 동안 발생한다.

call stack

• 현재 실행 중인 함수들의 호출 정보를 담고 있는 스택
• 동기적인 코드 실행이 이루어진다.
• 함수 호출 되면 → call stack에 추가되고, 함수가 종료 되면 → call stack에서 제거된다.