[JS] 자바스크립트 엔진, 런타임, 콜스택, 메모리힙, 지연시간

콜스택, 힙

• V8 엔진을 비롯한 대부분 JS엔진은 메모리힙(메모리할당 이루어짐)과 콜스택으로 구성

콜스택

• 소스코드의 평가 과정에서 생성된 실행 컨텍스트가 추가 및 제거되는 스택
• JS에서 원시값과 함수호출은 콜스택에 저장
• 스택 프레임: 스택 영역에 저장되는 함수의 호출 정보(코드 실행되면서 스택프레임이 쌓임)

힙

• 객체가 저장되는 메모리 공간
• 콜스택의 요소인 실행컨텍스트는 힙에 저장된 객체를 참조
• 객체는 원시값과 달리 크기 안 정해져있음 -> 할당해야 할 메모리 크기를 런타임에 결정(동적 할당) => 힙은 구조화되어 있지 않다.

• 순서

  • 1. 변수의 고유 식별자 생성(myArray)
  • 2. 콜스택의 메모리에 주소 할당(런타임에 할당)
  • 3. 힙에 할당된 메모리주소를 콜스택의 value로 저장(런타임에 할당)

  • 4. 힙의 메모리 주소에 할당된 값(이 예제의 경우 []) 저장
       

const myArray = [];
myArray.push(1);
myArray.push(2);
...
myArray = 3;//에러: 콜스택에서 새로운 메모리 주소 할당 -> const는 이를 허용X
myArray = ['a']//에러: 콜스택에서 새로운 메모리 주소 할당 -> const는 이를 허용X

• myArray=[]에서 새로운 값을 push해서 값이 변경돼도 참조값인 변수 myArray가 참조하는 메모리 주소는 같다.
• 즉 재할당 === 콜스택의 메모리주소가 바뀐다.let은 이를 허용O, const는 허용X

setTImeout의 지연 시간은 정확히 보장되는가?

• JS엔진 역할: 태스크 요청 되면 -> only 콜스택 통해 요청된 작업 순차적 실행

  • 비동기처리에서 소스코드의 평가와 실행 제외한 모든 처리는 JS를 구동하는 환경인 브라우저, Node.js에서 담당 => 이를 위해 브라우저는 태스크큐,이벤트루프 제공
  • 예)JS엔진: setTimeout의 평가와 실행/브라우저,Node.js:타이머 설정, 콜백함수 등록

function foo(){
  console.log('foo');
}

function bar(){
  console.log('bar');
}

setTimeout(foo, 0);
bar();

• 위의 경우 지연시간이 0이지만 4ms이면 최소 지연시간 4ms 지정 -> 4ms후에 콜백함수 foo가 태스크큐로 푸시되어 대기
• 이처럼 setTimeout함수로 호출 스케줄링한 함수는 정확히 지연시간 후에 호출된다는 보장은 없다. 지연 시간 이후에 태스크큐로 넘어가지만 콜스택이 비어야 호출되므로 약간의 시간차 발생 가능

브라우저

• 자바스크립트는 싱글스레드 방식으로 동작. 이 때 싱글스레드로 동작하는 것은 브라우저가 아닌 브라우저에 내장된 자바스크립트 엔진

  • 즉, 자바스크립트 엔진은 싱글스레드로 동작하고, 브라우저는 멀티스레드로 동작.

• 브라우저는 자바스크립트 엔진 외에도 Web API 제공

  • Web API: 브라우저에서 제공하는 API이고 DOM API, 타이머함수, HTTP요청(Ajax)과 같은 비동기 처리
  • 즉 브라우저와 자바스크립트 엔진이 협력하여 비동기 처리

출처

• 이웅모, 모던 자바스크립트 Deep Dive(위키북스, 2020)
• 자바스크립트의 메모리 모델