Event loop(이벤트 루프)

TLDR;

콜 스택을 모니터하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프.

콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제거되고 실행될 콜 스택으로 푸시됩니다.


싱글 스레드 기반 언어인 자바스크립트가 동시성을 지원하기 위해 사용하는 개념

동작방식

  1. 자바스크립트 엔진 내부에서는 실행시켜야하는 함수를 만날때 call stack 안에 실행시킬 작업을 쌓는다.
  2. 실행시키는 작업이 비동기적인 작업일 경우(이벤트를 등록한다던지, 타이머나 프로미스라던지) (자바스크립트 엔진과 무관한) web api에 작업을 이관하고 다음 작업으로 넘어간다.
  3. web api가 작업을 끝마치고 반환하는 콜백함수는 task queue에 추가한다
  4. 현재 call stack이 비어 있고 task queue에 아이템이 있을 경우 event loop가 task queue의 가장 앞의 아이템을 call stack 안에 넣는다
  5. task queue가 빌때까지 4번을 반복한다

Microtask

다른 task보다 우선하는 task. 프로미스나 mutation observer 등이 있다.

task가 끝났을 때나, 다른 자바스크립트가 실행중이지 않을 때 모든 콜백 후에 실행됨