Web APIs는 브라우저가 제공하는 API이다.

• DOM API
• setTimeout
• setInterval
• fetch
• event listner

setTimeout을 선언하면 WebApi에 콜백함수가 등록이 되고, 해당 초가 지났을때, webAPI가 TaskQueue에 그 콜백함수를 옮긴다.

SetimeOut을 호출하게 되면, setTimeout이 callStack에서 제거되고 setTimeOut에 작성한 콜백함수는 Task Queue로 넘어간다.

task Queue와 Call Stack을 관찰하는 아이가 있다. → Event Loop

Call Stack에 있는 함수들이 다 실행되고 나서(Event-loop가 CallStack에서 함수들이 다 종료될때까지 기다림) Stack이 비었을때, 이벤트 루프가 Task Queue에 있는 setTimeout에 넘겼던 콜백 함수를 Call Stack으로 옮긴다.

JS엔진이 Call Stack에 있는 콜백함수를 실행하게 된다.

<aside> 💡 이벤트 루프가 계속해서 돌면서 Call Stack이 비워져있다면, Task Queue에 있는 함수를 Call Stack으로 옮겨서 실행한다.

</aside>

• 함수 하나만 Task Queue에서 Call Stack으로 가져올 수 있다. → Call Stack에서 실행하고 종료후 Task Queue에 있는 함수 하나만 다시 Call Stack으로 옮긴다.

• Micro task Queue는 promise,then 과 mutation observer에 있는 콜백함수 들이 들어오게 된다.

• Micro task Queue는 이벤트 루프가 Micro TaskQueue에 머무르면서 (Task Queue와 다르게) 큐에 아이템이 없어질때까지 CallStack으로 옮긴다.

• Task Queue는 하나의 함수만 Call-Stack옮기고 Call-stack에 있는 함수가 끝날때까지 기다렸다가 이벤트 루프는 다시 돌기 시작한다.

<aside> 💡 이벤트 루프가 콜스택에 잇는 함수가 실행되기를 기다렸다가 최종 사항을 브라우저에 렌더링 시켜준다.

</aside>

• Call Stack에 연산이 엄청 걸리는 함수나, 무한루프 함수면 이벤트 루프가 머물러있기 때문에, 브라우저에게 업데이트가 일어나지 않는다.