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

 

이벤트 루프

 

자바스크립트의 특징 중 하나는 싱글 스레드로 동작하는 것입니다. 하지만 브라우저가 동작하는 것을 보면 많은 태스크가 동시에 처리되는 것처럼 보입니다. 이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프입니다.

 

이벤트 루프는 콜 스택(실행 컨텍스트 스택)에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인합니다. 만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킵니다.

 

 

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

 

마이크로태스크가 무엇인가요?

 

매크로태스크들 사이에서 먼저 실행되는 테스크들입니다.

 

자바스크립트 엔진은 매크로태스크 하나를 처리할 때마다 또 다른 매크로태스크나 렌더링 작업을 하기 전에 마이크로태스크 큐에 쌓인 마이크로태스크 전부를 처리합니다.

 

매크로태스크들은 먼저 들어온 순서대로 처리되지만 처리가 급한 태스크들도 매크로태스크로 처리한다면 지연이 발생하여 사용자에게 불편함을 줄 수 있습니다. 그러므로 현재 처리중인 매크로태스크가 처리완료된 직후에 큐에 저장해둔 마이크로태스크들을 모두 처리합니다.

 

마이크로태스크를 저장해둘 큐를 마이크로태스크 큐라고 합니다.

 

 

< 예시 >

 

setTimeout(() => alert("timeout"));

Promise.resolve()
  .then(() => alert("promise"));

alert("code");

 

호출되는 alert 순서는

 

1. alert("code")

2. alert("promise")

3. alert("timeout")

 

순서입니다. 위 코드가 실행되고 태스크가 처리되기전 매크로태스크 큐에는 'alert("code")', 'alert("timeout")' 순으로 태스크가 저장되어 있고 마이크로태스크 큐에는 'alert('promise')'가 들어있습니다.

 

매크로태스크 처리된 직후 마이크로태스크 큐에 태스크가 있다면 마이크로태스크 큐의 태스크들이 모두 처리되므로 처리 순서는code, promise, timeout 순서입니다.