Event Loop

Event Loop

이벤트루프란 간단히 이야기 해서 브라우저 메인 스레드 동작 타이밍을 관리하는 관리자라고 할 수 있다. 여기서 메인 스레드란 자바스크립트 코드 실행이나 브라우저 렌더링을 맡는 등 브라우저의 주된 동작이 수행되는 곳이다. 자바스크립트는 싱글 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행한다.
그러나 자바스크립트가 사용되는 환경을 생각해보면, 많은 작업이 동시에 처리되고 있는 것을 알 수 있다.
예를 들면, 웹브라우저는 애니메이션 효과를 보여주면서 마우스 입력을 받아서 처리하고, Nodejs기반의 웹서버에서는 동시에 여러개의 http요청을 처리할 수 있다.

이벤트루프가 중요한 이유

웹 api에서 제공하는 비동기 함수들(ex. fetch, setTimeout)과 워커 종류를 제외한 대부분의 자바스크립트 코드가 메인 스레드라는 곳에서 실행된다. 또한 브라우저 화면을 그리는 렌더링 작업도 이곳에서 실행된다. 이처럼 브라우저의 주요한 동작들이 메인 스레드라는 하나의 싱글 스레드로 동작한다.
만약 어느 한 작업의 시간이 길어지게 된다면 다른 작업을 실행하지 못 할 수도 있다.
그래서 글 스레드에서 하나의 작업이 오랫동안 실행되어서도 안 되고, 여러 작업 중 어떤 작업을 우선으로 동작시킬 것인가 결정하는 것도 매우 중요하다. 또한, 작업 간 전환 속도를 빠르게 하여 한 번에 하나의 작업씩 수행하지만 마치 동시에 수행하는 것처럼 동작해야 한다.
이러한 섬세한 컨트롤을 이벤트 루프가 메인 스레드의 동작을 관리한다.

이벤트루프 동작 원리

1. 초기 콜 스택에 쌓여있는 task를 모두 처리
2. Promise.then 콜백이 microtask queue에 등록되어 있다면 실행
3. 화면 갱신이 필요하다면 렌더링 파이프라인으로 이동
4. task queue에 있는 콜백을 하나씩 실행.