[2023-09-21] TIL - Event Loop(Microtask Queue, Animation Frame)

이벤트 루프

- JavaScript는 싱글 스레드 언어이다.

 -> JavaScript의 Call Stack은 하나만 존재한다.

 

하지만 브라우저에서 실행되는 스크립트는 비동기적으로 데이터를 불러오고 애니메이션을 실행시킬까?
어떤 원리로 애니메이션과 클릭이벤트를 같이 처리할까?

-> 브라우저의 Event Loop라는 시스템이 있기 때문에 가능하다. 

 - Event Loop는 브라우저나 NodeJS에서 자체적으로 관리

 

- 아래의 동작과정을 살펴보자

- 클릭과 같은 DOM이벤트나 Timer 등을 실행하게 되면 브라우저에 위임된다.

- 보통 WebAPI는  Callback 함수를 넘기게 되는데 이 Callback함수는 비동기 작업이 끝나면 Task Queue에 넣어진다.

- Task Queue에서는 순차적으로 꺼내 CallStack에 push가 된다,

- 결국 이 과정들은 멀티스레드로 동작한다.

https://gruuuuu.github.io/javascript/async-js/

Javascript 비동기 함수의 동작원리 (feat. EventLoop)

 

 

선택과제 

Microtask Queue

- Microtask Queue는 Promise나 async/await, process.nextTick, Object.observe, MutationObserver과 같은 비동기 호출을 넘겨받는다.

- 그리고 Microtask의 우선순위는 일반 task(또는 macrotask)보다 더 높다.

Animation Frame

- Animation Frames는 requestAnimationFrame과 같이 브라우저 렌더링과 관련된 task를 넘겨받는 Queue이다.

- 우선순위는 Microtask보다는 낮고, (Macro)Task보다는 높다.

 

정리

- 이벤트 루프가 비동기 작업을 처리하는 우선순위는 Microtask Queue -> Animation Frames -> Task Queue 순이다.

- 또한, 이벤트 루프는 Microtask Queue나 Animation Frames를 방문할 때는, 큐 안에 있는 모든 작업들을 수행하지만, Task Queue를 방문할 때는 한 번에 하나의 작업만 call stack으로 전달하고 다른 Queue를 순회한다.

 

https://velog.io/@titu/JavaScript-Task-Queue%EB%A7%90%EA%B3%A0-%EB%8B%A4%EB%A5%B8-%ED%81%90%EA%B0%80-%EB%8D%94-%EC%9E%88%EB%8B%A4%EA%B3%A0-MicroTask-Queue-Animation-Frames-Render-Queue

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)