Event Loop

Event Loop란?

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

이벤트 루프의 동작 원리

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

이벤트 루프의 중요성

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