1. Javascript Runtime
2. JS의 싱글스레드 vs 멀티스레드
3. Call Stack & Callback Queue
오늘은 브라우저 렌더링, html과 css 그리고 자바스크립트를 이용하여 총괄적으로 우리가 웹에 어떤 식으로 그리는지 어떤 식으로 작성된 데이터를 올리고 호출하고 그리는지까지의 전체적인 브라우저 렌더링 과정을
도식화하고 그려보았다.
1. Javascript Runtime
런타임 이란 프로그래밍 언어가 구동되는 환경을 말합니다. Node.js 나 크롬등의 여러 브라우저들은 자바 스크립트가 구동되는 환경이기 때문에, Node.js나 브라우저들을 자바스크립트 런타임이라고 한다.
2. JS의 싱글스레드 vs 멀티스레드
싱글스레드 : 자바 스크립트는 싱글스레드, 논-블로킹 언어이다.
싱글스레드 : 싱글스레드는 하나의 힙 영역과 하나의 콜스택을 가진다. 하나의 콜스택을 가진다는 것은 한번에 한 가지 일을 한다는 것이다.
멀티스레드 : js 는 싱글스레드이지만, 멀티스레드와 같이 Callback 함수나 비동기 처리를 할 수 있다. Event Loop에서 CallStack이 비어있는지 확인하고 Task Queue의 콜백함수들을 Call Stack에 추가한다.
3. Call Stack & Callback Queue
Call Stack
자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조.
1. 함수 호출시 실행콘텍스트가 생성되고, 이를 콜 스택에 추가한 다음 함수를 수행한다.
2. 함수에 의 해 호출되는 모든 함수는 콜 스택에 추가되고 해당위치에서 실행한다.
3. 함수의 실행이 종료되면 해당 실행 컨텍스트를 콜 스택에서 제거한 후 중단 된 시점부터 다시 시작한다.
4. 만약 스택이 할당된 공간보다 많은 공간을 차지하면 스택오버플로우가 발생한다.
Callback Queue
1. 콜백 큐는 Microtask Queue, Animation Frames, Task Queue로 구성되어 있다.
2. web API의 종류에 따라 다른 Queue로 이동된다.
3. 콜백 큐에서 실행스택으로 옮겨지는 우선순위는 1. Microtask Queue 2. Animation Frames 3. Task Queue이다.