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

이벤트 루프

자바스크립트 엔진이 수행하는 메인루프작업이며 태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우엔 잠드는, 끊임없이 돌아가는 자바스크립트 루프다.

매크로태스크 큐

• 외부스크립트 < script src="..." >가 로드될 때, 이 스크립트를 실행하는 것
• 사용자가 마우스를 움직일 때 mousemove이벤트와 이벤트핸들러를 실행하는 것
• setTimeout에서 콜백 함수를 실행하는 것
  등등

엔진이 처리중인 작업이 있을때 태스크가 들어오면 매크로태스크큐에 넣은후 작업이 끝나면 큐에서 태스크를꺼내 실행한다.

마이크로태스크큐

promise핸들러인 .then/catch 가 보관되는 큐다.

표준 API인 queueMicrotask(func)를 사용하면 함수 func를 마이크로태스크 큐에 넣어 처리할 수 있다.

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

let i = 0;
function count() {
   do {
      i++;
      progress.innerHTML = i;
   } while (i % 1e3 != 0);

   if (i < 1e5) {
      queueMicrotask(count);
   }
}
count();

queueMicrotask메소드로 마이크로테스크큐에 들어간 작업은 랜더링되지 않는다.

이벤트 루프 알고리즘 순서

1. 매크로태스크 큐에서 가장 오래된 태스크를 꺼내 실행합니다(예: 스크립트, 사용자이벤트, setTimeout...).

2. 모든 마이크로태스크를 실행합니다. 이 작업은 마이크로태스크 큐가 빌 때까지 이어진다

3. 태스크는 오래된 순서대로 처리됩니다.

4. 렌더링할 것이 있으면 처리합니다.

5. 매크로태스크 큐가 비어있으면 새로운 매크로태스크가 나타날 때까지 기다립니다.

1번으로 돌아갑니다.