[브라우저] 4. 브라우저 런타임 환경

• Web APIs를 통해 setTimeout 같은 API를 호출하면, call stack에 실행을 위해 쌓였던 setTimeout은 지워지고 Web API는 타이머를 시작한다.
• setTimeout을 통해 지정했던 시간이 끝나면, Task Queue에 setTimeout의 콜백 자체를 집어넣는다.
• 이때 이벤트 루프는 계속 돌면서 call stack이 빌 때까지 기다렸다가, call stack이 비게 되면 task queue에 있던 콜백을 하나씩 call stack으로 가져온다.
• 이때 call stack에서 수행 중인 것은 중단이나 껴듦으로 인한 방해 없이 실행동안 끝까지 보장된다.

큰 그림 이해하기!

Microstack Queue

promise에 등록된 콜백 (프로미스 수행 후 then에 등록한 콜백) 또는 mutation observer라는 Web API 중 하나가 들어오는 공간

render

브라우저에서 주기적으로 요소들을 움직이거나 animation을 동작할 때 화면에 업데이트 해준다.
Requset Animation Frame -> 다음에 브라우저가 업데이트 되기 전에 콜백을 실행한다.

이벤트 루프가 돌면서 주기적으로 render를 업데이트 해주고, Microtask Queue가 빌 때까지 그 안에 있던 콜백들을 계속 call stack으로 데려와 처리한다.
Microtask Queue에 있던 콜백들이 모두 처리되어 비게 되면 Task Queue에 있던 콜백들을 call stack으로 데려와 처리하게 된다.