JavaScript 공부 [13. JavaScript 구조, 브라우저 작동]

자바스크립트는 싱글 쓰레드 언어!
자바스크립트가 동작하는 브라우저(웹 API) 사용시 멀티 쓰레드 가능
자바스크립트가 동작하는 실행환경에서 이벤트 루프 등을 사용해서 멀티 쓰레드 효과 가능

JavaScript Engine 구조

Memory Heap

변수, 함수 등 데이터 선언시 할당된 데이터가 임의로 저장

Call Stack(LIFO)

함수 작동 순서 저장해놨다가 순서대로 함수 실행

브라우저 작동

Memory Heap 에 변수, 함수 선언
Call Stack 에 함수 작동 순서 저장
Web API 에 다양한 함수 존재

1. Call Stack에서 순서대로 함수 실행 중 Web API의 기능 호출
2. 호출한 함수는 Call Stack에서 Pop
3. Web API에서 호출된 기능 작동
4. Web API와 JavaScript Engine은 병렬적으로 작동중이기 때문에, Web API가 기능 작동하고 있는 와중에도 JavaScrpit Engine 또한 실행중
5. Web API가 작동을 마치면 Task Queue(FIFO)에 해당 기능 Callback Push
6. 계속 실행하며 Task Queue를 관찰하던 Event Loop는, JavaScript Engine의 Call Stack이 비워지면, Task Queue에 있던 Callback을 Call Stack에 하나씩 가져와서 JavaScript Engine이 수행할 수 있도록 도와줌!

//
5.에서 Promise를 쓰면 Microtask Queue에 Push!
Render 에 Request Animation Frame - Render Tree - Layout - Paint Push!

즉, Render - Microtask Queue - Task Queue - Call Stack - Render~~ 순으로 Event Loop가 돌아가면서 주시 및 실행한다!