이벤트 루프와 매크로 테스크, 마이크로 태스크

자바스크립트는 싱글 스레드 기반의 언어이다. 자바스크립트의 엔진은 하나의 호출 스택을 가지고 있으므로 한 번에 한가지 일만 처리가 가능하다.

따라서 시간이 오래 소요되는 작업을 수행하면 그 사이에 클릭이나 다른 요소가 랜더링 되어져야 하는게 있더라도 블락킹 되어있어 아무 일도 일어나지 않게 된다.

이러한 문제를 비동기 콜백으로 해결이 가능하며 자바스크립트 엔진을 구동하는 환경인 브라우저나 node에서 처리된다.

브라우저의 비동기 처리

• Memory Heep
  객체들이 힙 메모리에 할당되며 크기가 동적으로 변하는 값들의 참조 값을 가지고 있다.

• Call Stack
  함수 호출 시 실행 컨텍스트가 생성되어 스택을 구성한다.

• Web APIs
  웹 브라우저에 구현되어 있는 API로 DOM event, AJAX, Timer 등이 존재한다.

• 테스크 큐
  이벤트 루프는 하나 이상의 태스크 큐(Macrotask Queue, Microtask Queue, Animation Frames)를 가진다. 각 큐의 자세한 설명은 아래에서 설명한다.

• Event Loop(이벤트 루프)
  콜 스택이 비어있을 때 테스크 큐에 있는 콜백 함수를 처리한다. 큐의 첫 번째 태스크를 가져오는 것이 아닌 가장 오래되고 실행 가능한 테스크를 가져와서 처리한다.

이벤트 루프

자바스크립트는 싱글 스레드 기반의 언어이지만 자바스크립트를 구동하는 환경은 여러 스레드를 사용한다. 자바스크립트 구동 환경이 자바스크립트 엔진과 연동하기 위해서 사용하는 장치가 이벤트 루프이다.

마이크로 태스크와 매크로 태스크

마이크로 태스크

마이크로 테스크들은 실행되면서 마이크로 테스크를 큐에 추가할 수 있다. 새로 추가된 마이크로 테스크를 포함해서 큐가 빌 떄까지 계속 실행한다.

매크로 태스크

매크로 테스크는 큐에 있는 것을 실행시키기 시작할 때 있는 매크로 태스크만 실행한다. 추가된 매크로 태스크는 다음 이벤트 루프가 실행할 때까지 실행되지 않는다.

마이크로 태스크 큐와 매크로 태스크 큐

API에 따라서 사용하는 태스크 큐가 달라진다.

마이크로 테스크 큐 : Promises, Mutation Observer 등
매크로 테스크 큐 : setTimeout, setInterval 등

이벤트 루프의 동작

아래의 코드로 코드의 동작을 예측해보자.

// A
console.log('script start');

// B
setTimeout(() => console.log('setTimeout'), 0);

Promise.resolve()
  // C
  .then(() => console.log('promise_1'))
  // D
  .then(() => console.log('promise_2'));

// E
console.log('script end');

1. A에 도달하면 'script start'가 출력된다.
2. B에 도달하면 setTimeout web api가 타이머를 실행시키고, 타이머가 종료되면 매크로 태스크 큐에 들어간다.
3. C에 도달하면 Promise 콜백 함수가 마이크로 태스크 큐에 들어간다.
4. E에 도달하면 'script end' 가 출력된다.
5. 콜 스택이 비어있으므로 이벤트 루프가 마이크로 태스크 큐에 있는 Promise 콜백 함수를 콜 스택으로 넘겨서 실행시킨다.
6. 'Promise_1'이 출력된다.
7. D에 도달하면 Promise 콜백 함수가 마이크로 태스크 큐에 들어간다.
8. 이벤트 루프는 다음 마이크로 태스크 큐의 D Promise 콜백 함수를 실행시킨다.
9. 'Promise_2'이 출력된다.
10. 이벤트 루프는 매크로 태스크 큐의 setTimeout 콜백 함수를 실행시킨다.
11. 'setTimeout'이 출력된다.