Javascript Runtime

Javascript Runtime

2020. 3. 5. 09:56ㆍ웹/Javascript

자바스크립트 런타임 구조

싱글 스레드

자사스크립트는 기본적으로 싱글 스레드 지원. 즉 Call Stack에 쌓여 있는 작업을 하나씩 수행.

싱글 스레드에서 동기적으로만 동작한다면 여러 문제가 발생 할 수 있음, 예를 들어 용량이 큰 데이터를 받아서 띄워주는 경우 시간이 오래 걸리거나 최악의 경우에는 웹 페이지를 띄우지 못하는 경우가 생길 수 있음.

이런 문제를 대비해서 자바스크립트는 싱글스레드에서도 비동기적인 프로그래밍이 가능하도록 Event Queue, Event Loop 같은 장치 지원.

Web API

브라우저는 자바스크립트 엔진 뿐만 아니라 Web API도 함께 제공되는 자바스크립트 런타임을 내장.

Web API를 통해 setTiemout, HTTP 요청 메소드, DOM 이벤트 등의 메소드를 지원

Call Stack 에서 실행된 비동기 함수는 Web API 호출하고, Web API는 콜백함수를 Callback Queue 에 등록.

Callback Queue

Web API 결과를 쌓아두는 큐(비동기적으로 실행된 콜백함수가 보관)

자바스크립트에서 setTimeout(fn, 1000) 를 호출 시, Web API는 타이머 동작하여 1초 후 콜백 큐에 fn 을 쌓음.

Event Loop

콜 스택과 큐를 관할(모니터링)하는 역할.

콜 스택이 비어있으면 콜백 큐에 쌓여있는 작업들을 콜 스택에 전달하여 해당 작업이 처리되도록 하는 역할.

※ MDN 문서

while(queue.waitForMessage()){
  queue.processNextMessage();
}

queue.waitForMessage() 함수는 현재 아무 메시지도 없다면 새로운 메시지 도착을 동기적으로 기다린다고 정의.

참조

오늘부터개발자