콜 스택은 말 그대로 스택 구조로 되어 있어서, 선입후출 방식이다. (‘최근에 들어온 애가 먼저 나간다’)
함수가 호출되면 콜 스택에 차례로 쌓이고, 콜스택 최상단의 함수가 실행된다. 실행 중에 또 다른 함수가 호출되어 콜스택에 쌓이면 기존에 실행 중이던 함수는 잠시 중단되고 다시 최상단의 함수가 실행된다.
자바스크립트의 비동기 처리
하지만 비동기 처리하는 과정은 조금 다르다.
실제 애플리케이션은 여러 작업을 동시에 처리하는 것처럼 보이는데, 이런 동시성을 가능하도록 하는 것이 이벤트 루프이다.
비동기 작업들은 (이벤트핸들러 함수, 서버 통신 등) 모두 자바스크립트가 아닌 Web API에서 처리된다.
코드 실행 중에 비동기 작업을 만나면 그 코드는 콜스택에서 바로 빠져나와 Web API로 전달된다. web api에서 작업을 완료한 뒤에 콜백함수는 큐(queue)에서 대기한다.
큐에 쌓인 작업(task)들은 스택의 작업이 모두 완료되고 스택이 빈 상태가 되면, 하나씩 스택으로 이동한다.
큐는 선입선출 방식 (들어온 순서대로 나간다)
이벤트 루프는 스택의 작업 상태와 (비어있는지) 큐의 상태를 반복 확인한다.
=> 스택이 비면 -> 큐에서 스택으로 작업 이동 -> 스택에서 작업 실행
비동기 작업은 microtask, task, animation frame 작업으로 구분된다.
microtask가 task보다 먼저 실행된다.
microtask가 처리된 후엔 requestAnimationFrame이 호출되고 화면이 브라우저 렌더링이 발생한다.
