JS - Runtime

Runtime

자바스크립트의 런타임

'크롬'브라우저 라는 JS runtime(프로그래밍 언어의 구동 환경)의 구성
: V8, Web API, 콜백 큐, 이벤트 루프, 렌더 큐

1) V8

• 구글에서 C++로 만든 자바스크립트 엔진
• 싱글 스레드 제공 = 콜스택(함수 호출 순서 저장) 1개 + 힙(할당된 메모리 저장) 1개
• 콜스택이 1개이므로 한 번에 1가지 일만 한다! 웹브라우저의 코드 실행이 종료될 때까지 유저가 클릭해도 반응 못하는 콜스택 멈춤 현상, equal to 블로킹 상태가 될 수 있으나...

2) Web API

• ...Web API가 비동기 동작 메서드; setTimeout, ajax(HTTP요청), DOM이벤트 등을 제공하므로 JS는 논블로킹, 비동기 콜백 특성을 갖음
• 예) 타이머 동작, 5초 후 콜백 함수 실행에 대한 기능 지원

3) 콜백 큐

• Web API의 결과값을 쌓는 큐

4) 이벤트 루프

• 콜스택과 콜백 큐를 관찰하여 콜스택이 비어 있으면 콜백 큐의 첫번째 콜백을 콜스택에 쌓음

5) 렌더 큐

• 비어있는 콜스택에 쌓을 때 콜백 큐보다 먼저 쌓음(우선순위 높다)

참고

• setTimeout 은 설정한 시간이 지난 후 콜스택이 비어있을 때에만 콜백 큐의 콜백을 스택에 쌓아 실행할 수 있다(최소시간 보장)
• 설정한 시간이 0초여도 바로 실행되는게 아님!
• 스택: Last In First Out
• 큐: First In First Out

출처

https://beomy.github.io/tech/javascript/javascript-runtime/