TIL - 20220913

 오늘은 모던 JavaScript 튜토리얼에서 이벤트 루프와 매크로태스크, 마이크로태스크에 대해 공부했다. 작성한 질문은 다음과 같다.

 이벤트 루프란 자바스크립트에서 태스크가 오기만을 기다렸다가 태스크가 들어오면 처리하고, 처리할 태스크가 없는 경우에는 잠드는 루프를 의미한다.

 

 이벤트 루프의 알고리즘은 다음과 같다.

1. 매크로태스크 큐에서 가장 오래된 태스크를 실행한다.
2. 모든 마이크로태스크를 실행한다. 이 작업은 마이크로태스크 큐가 빌 때까지 이어지며 가장 오래된 태스크부터 순차적으로 실행된다.
3. 렌더링 할 것이 있다면 렌더링 된다.
4. 매크로태스크 큐가 비어있다면 새로운 매크로태스크가 올 때까지 기다린다.
5. 매크로태스큐가 온다면 1번으로 돌아간다.

여기서 핵심은 자바스크립트 엔진은 매크로태스크 하나 처리할 때마다 또 다른 매크로태스크나 렌더링으로 넘어가지 않고 마이크로태스크 큐에 쌓인 마이크로태스크 전부를 처리한다는 점이다.

 

태스크의 예시는 다음과 같다.

• setTimeout에서 시간이 다 됐을 때, 콜백 함수를 실행하는 경우
• 사용자의 상호작용과 관련된 이벤트와 이벤트 핸들러를 실행하는 경우
• 외부 스크립트가 로드될 때, 스크립트를 실행하는 경우

 

 새로운 매크로태스크를 스케줄링하는 방법은 지연시간이 0인 setTimeout(function)을 사용하는 방법이다.

 

 새로운 마이크로태스크를 스케줄링하는 방법은 queueMicrotask(function)을 사용하는 방법과 프라미스 핸들러를 사용하는 방법이 있다.