[Record] | 이벤트 루프, 마이크로 태스크, 매크로 태스크

이벤트 루프

• 싱글 스레드 기반 언어인 자바스크립트는 이벤트 루프를 통해 비동기적으로 작업을 수행할 수 있다.

• 위 사진은 브라우저의 환경을 간단하게 나타낸 이미지이다.
  1. JS 엔진
     • Heap: 메모리 할당이 일어나는 영역(객체와 같은 참조 타입의 데이터가 저장되는 영역)
     • CallStack: 함수가 호출될 때 생성되는 실행 컨텍스트가 구성하게 되는 stack
  2. WebAPIs
     • 웹 브라우저에 구현된 API
     • DOM event, AJAX, Timer 등의 비동기 처리 담당 API 존재
  3. Event Loop
     • 콜스택이 비었을 시, 이를 감지하고 태스크 큐에 있는 비동기 콜백 함수를 콜스택에 추가한다.
  4. Callback Queue (or Task Queue)
     • 비동기적으로 실행될 콜백함수들이 임시로 대기하는 큐 형태의 배열이다.

---

 

마이크로 태스크 & 매크로 태스크

• 태스크 큐는 구체적으로 마이크로 태스크큐, 매크로 태스크큐로 나뉜다.
• 마이크로 태스크 큐는 매크로 태스큐에 비해 우선순위가 높아, 콜스택이 비워졌을때 마이크로 태스크 큐를 먼저 확인 후 콜스택에 먼저 전달된다. 그리고 마이크로 태스크큐가 비워지게되면 매크로 태스크 큐를 실행하게 된다.
  • Macrotasks: requestAnimationFrame, I/O, UI rendering, setTimeout, setInterval, setImmediate
  • Microtasks: process.nextTick, Promises, queueMicrotask(f), MutationObserver

---

 

Reference

• 모던자바스크립트 - 이벤트루프, 매크로 태스크, 마이크로 태스크
• JS Conf - event loop
• Task와 Microtask의 동작방식