이벤트 루프

이벤트 루프란..?

Event loop

단일 스레드 기반인 자바스크립트가 '동시성'을 지원하는 방식

• 자바스크립트가 실행되는 환경(node.js, 브라우저)에서는 주로 여러개의 스레드가 사용된다. 이러한 스레드들이 단일 스레드를 사용하는 자바스크립트 엔진과 상호 연동하기 위해 사용하는 장치
• 프로세스가 실행되는 동안 계속 call stack과 callback queue의 상태를 체크하여, call stack이 비게되면, callback queue의 첫번째 콜백을 call stack으로 밀어 넣는다.

Web APIs

• 브라우저에서 제공하는 API, 멀티 쓰레드를 지원한다
• DOM API, fetch, Timer, event listener 등

Call Stack

• Stack
  - LIFO(Last In First Out)
• Call Stack 에는 함수들이 실행하는 것을 순서대로 담고 마지막으로 쌓인것부터 하나씩 순차적으로 실행된다.
• 함수들이 호출하는 순서를 기억했다가 함수가 끝나면 원래 있던자리로 돌아기기 위해서 쓰이는 자료구조

Task Queue

• Queue
  - FIFO(First In First Out)
• Timer 함수(setTimeout, setInterval), DOM 이벤트 리스너(addEventListener) 등의 콜백 함수가 보관되어짐

Microtask Queue

• Promise 객체의 .then/.catch/.finally 콜백 함수가 보관되어짐
• mutation observer에 등록된 콜백 함수가 보관되어짐

Render

• 60fps(16.7ms)마다 브라우저를 업데이트
• 브라우저에 DOM 요소를 변형한것들이 표기 되기 위해서는 렌더트리를 업데이트, (Layout, Paint, Composite)단계를 거친다.

RequestAnimationFrame

• 브라우저가 업데이트 되기전에 RequestAnimationFrame에 등록한 콜백이 실행된다.
  즉, RequestAnimationFrame은 60fps를 보장한다.