Event Roof
출처 How JavaScript works: an overview of the engine, the runtime, and the call stack
- 자바스크립트는 '단일 스레드'
- 자바스크립트는 어떻게 '동시성'을 지원하는 걸i까
- 비동기 요청은 자바스크립트의 구동환경(브라우저나 node.js)에서 이루어진다
- Run to Completion: 하나의 함수가 실행되면 이 함수가 끝날 때까지는 다른 어떤 작업도 끼어들지 못한다.
- Node.js에서는 비동기 IO를 지원하기 위해 libuv 라이브러리를 사용하며 libuv 라이브러리가 이벤트루프를 제공
- Node.js는 Event Driven방식, 즉 non-blocking으로 처리를 위해 Event Roof를 사용
- Event Roof는 Call Stack과 Callback Queue로 구성
- Event Roof는 주기적으로 Call Stack이 비어있는지 확인(Polling)
- 선입후출(LIFO, Last In First Out)의 룰을 따른다.
Call Stack
- 실행될 코드들의 순서를 기억하기 위해 쌓아놓는 곳
- 마지막에 쌓인 코드부터 실행(후입선출)
Callback Queue(Task Queue)
- 비동기 작업들이 대기하는 곳
- Call stack이 비어있어야 Callback Queue의 대기열 맨앞 코드 부터 Call Stack으로 옮겨져서 실행된다.
- 선입선출(FIFO, Frist In Frist OUT)의 룰을 따른다.
WEB API
- 브라우저에서 제공하는 API로 DOM, Ajax, Timeout 등이 있다.
- Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 실행해야할 타이밍에 Callback Queue에 넣는다.
Event Loop
- Call Stack이 비워진 상태가되면 Callback Queue의 첫번째 콜백을 Call Stack으로 넣는다. (이런 반복적 행동을 틱이라 한다.)
Microtask Queue
- Event Loof는 우선적으로 Microtask Queue를 확인하여 콜백이 있다면, 이를 먼저 Call Stack에 담는다.
- Promise의 then()의 콜백은 Task Queue가 아닌 Microtask Queue에 담긴다.
requestAnimationFrame API
- requestAnimationFrame API가 실행되면 콜백이 Animation Frames로 담긴다.(setTimeout이 실행되면 타이머 완료 후 콜백이 Task Queue에 담기는 것 처럼)
우선순위
- Microtask Queue > requestAnimationFrame > Task Queue (크롬 기준)
Event Queue
- Task Queue와 동일한 역할
Job Queue
- Microtask Queue와 동일한 역할
Render Queue
- 브라우저에서 사용자에게 래스터 이미지를 보여주기 위해 HTML, CSS, Javascript 코드를 변환하는 과정을 의미한다.(rendering path, critical rendering path 라고도 한다.)
- DOM Tree -> CSS Tree -> CSSOM -> Render Tree -> Layouting -> Layer Tree -> Paint -> GPU Syne -> Composition(스크린에 그려지는 Final Frame)