싱글스레드 자바스크립트
자바스크립트는 하나의 메인스레드를 가지는 싱글스레드 구조다. 한번에 한가지 일만 수행할 수 있지만, web APIs를 통해 비동기작업을 수행할 수 있다. 이벤트루프는 자바스크립트 엔진이 적절하게 동기작업과 비동기작업을 수행할 수 있도록 관리해준다.
콜스택
자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조다. 동기 코드가 실행될때 함수가 콜스택에 쌓이고, 실행이 완료되면 제거된다. 후입선출 구조.
콜백큐
비동기적 작업이 완료되면 실행되는 콜백 함수들이 대기하는 공간. 함수의 우선순위에 따라 microtask queue와 task queue로 나뉘어 추가되고, 우선순위가 높은 microtask queue 부터 실행된 후 해당 큐가 비워지면 task queue가 실행된다.
web APIs
브라우저에서 제공하는 API 모음. 멀티스레드 구조라서 비동기 작업을 동시에 처리할 수 있다. 비동기작업은 콜스택에서 실행되지 않고 여기서 실행된다. setTimeout(), addEventListener()와 같은 이벤트핸들링이 여기서 수행된다.
이벤트루프
이벤트 루프는 브라우저 내부의 콜스택, 콜백 큐, web APIs의 요소를 모니터링하면서 작업을 배분한다. 콜스택이 비어있으면 콜백큐에서 함수를 가져와 실행하는데, microtask queue에 있는 작업부터 먼저 꺼내서 콜스택에서 실행한 후, 비워지면 task queue에서 꺼내 실행한다.
이때 동기코드에서 무거운 연산이 실행되면서 콜스택을 계속 사용하고 있다면, 콜백큐에 있는 작업들의 실행이 지연되며 렌더링이 지연될 수 있다.
