Event Loop 이벤트 루프 (태스크큐 & 마이크로 태스크 큐)

‘이벤트 루프란 ?’

---

1. 자바스크립트 엔진 > 요청을 동기적으로 처리
   javascript는 단일스레드 기반 언어로 자바스크립트 엔진이 단일 콜스택을 갖는다. 즉, 요청이 동기적으로 진행된다는 의미이다.
2. 비동기 요청 처리는 브라우저나 Node.js가 담당
   자바스크립트 엔진이 비동기로 처리할 수는 없다. 비동기 요청은 브라우저나 Node.js가 담당한다.
3. 여기서 자바스크립트 엔진과 그 실행환경을 연동시켜주는 장치가 이벤트 루프이다.
    따라서 이벤트 루프는 자바스크립트 엔진에 있지 않고 그 환경에 속한다.

 

 

태스크 큐 Task Queue & 마이크로태스크 큐 Microtask Queue

---

자바스크립트 실행환경은 2가지 큐를 가지고 있으며 각각 스크립트 실행, 이벤트 핸들러, 콜백함수 등의 태스크(Task 할일)이 담기는 공간이다. 태스크가 콜백함수라면 그 종류에 따라 다른 큐에 담기며 대표적인 예로는 태스크 큐와 마이크로 큐가 있다.

이벤트 루프는 2개의 큐를 감시하고 있다가 콜스택이 비게 되면, 콜백함수를 꺼내와서 실행한다. 이때 마이크로태스크 큐의 콜백함수가 우선순위를 가지기 때문에 마이크로 태스크 큐의 콜백함수를 전부 실행하고 나서 태스크 큐의 콜백함수를 실행한다. 따라서 마이크로 태스크 큐의 task가 많으면 UI렌더링이 지연될 수 있다.

 

 

예시를 통한 동작방식의 이해

---

console.log('1: Call stack');
setTimeout(() => console.log('2: Task Queue'));
Promise.resolve().then(() => console.log('3: Microtask Queue'));

1: Call stack
3: Microtask Queue
2: Task Queue

결과는 위와 같다.

1. 스크립트 실행이라는 태스크가 태스크 큐에 들어간다.
2. 이벤트 루프가 그 태스크를 가져와 로드된 스크립트를 실행시킨다.
   이때 console.log('1: Call stack'); 가 실행된다.
3. setTimeout()이 콜스택으로 보내면, 브라우저가 이를 받아서 타이머를 동작시킨다.
4. 타이머가 끝나면 setTimeout() 콜백함수를 태스크 큐에 넣는다.
5. Promise가 콜스택으로 가고 콜백함수를 마이크로 태스크 큐에 넣는다.
6. 태스크 큐 분리가 끝났으면, 이벤트 루프가 마이크로태스크 큐에서 Promise의 콜백함수를 가져와 콜스택에 넣는다. (제일 오래된 태스크를 먼저 가져온다.)
7. Promise의 콜백함수가 끝나고 이벤트 루프가 태스크 큐에서 setTimeout()의 콜백함수를 가져와 콜 스택에 넣는다.
8. setTimeout() 의 콜백함수가 끝나면 콜스택이 비게되고 프로그램이 종료된다.