자바스크립트 엔진, 렌더링 엔진

engine / 면접질문

2023.04.09.

자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.

전통적인 인티프리터일 수도 있고, 특정한 방식으로 바이트코드를 생성하여 JIT 컴파일러를 통해 실행할 수도 있다.

여러 목적으로 사용되지만, 대표적으로 웹 브라우저에서 자바스크립트 코드를 실행하는 데 사용된다.

자바스크립트 엔진은 크게 메모리 힙, 콜 스택, 큐로 구성되어 있다.

JS엔진구조

콜 스택

콜 스택은 함수 호출에 대한 정보를 담고 있는 스택이다.

함수가 호출되면, 함수의 매개변수, 지역 변수, 반환 주소 등의 정보를 콜 스택에 저장한다.

함수가 종료되면, 콜 스택에서 해당 함수의 정보를 제거한다.

function foo(b) {
  let a = 10
  return a + b + 11
}

function bar(x) {
  let y = 3
  return foo(x * y)
}

const baz = bar(7)

위 코드를 실행하면, 콜 스택은 다음과 같이 변한다.

bar를 호출할 때, bar의 인수와 지역 변수를 포함하는 첫 번째 프레임이 생성된다.
bar가 foo를 호출할 때, foo의 인수와 지역 변수를 포함하는 두 번째 프레임이 생성되어 첫 번째 프레임의 위로 푸시된다.
foo가 반환하면, 맨 위의 프레임 요소를 스택 밖으로 꺼낸다. (bar 호출 프레임만 남음)
bar가 반환하면, 스택이 빈다.

인수와 지역 변수는 스택 바깥에 저장되므로 바깥 함수가 반환되어도 안쪽 함수의 변수에 접근할 수 있다. 이를 클로저라고 하는데, 추후 포스팅할 예정이다.

메모리 힙

객체는 힙에 할당된다. 힙은 단순히 메모리의 큰 덩어리일 뿐이다.

힙은 콜 스택과 달리, 논리적인 구조를 가지지 않는다.

큐

JS의 런타임은 이벤트 루프를 통해 메시지 큐를 관리한다.

임의 시점에 런타임은 대기열에서 가장 오래된 메시지부터 큐에서 꺼내 처리한다. 이를 위해 런타임은 꺼낸 메시지를 매개변수로 메시지에 연결된 함수를 호출한다. 다른 함수와 마찬가지로 호출된 함수는 콜 스택에 프레임을 생성한다.

함수 처리는 스택이 비워질 때까지 계속된다. 이후, 메시지 큐에서 다음 메시지를 꺼내 처리한다.

렌더링 엔진

렌더링 엔진은 HTML과 CSS를 파싱하여 브라우저 화면에 표시하는 역할을 한다.

보통 브라우저 엔진은 렌더링 엔진을 의미한다.

CRP(Critical Rendering Path)는 렌더링 엔진이 HTML과 CSS를 파싱하여 브라우저 화면에 표시하는 과정을 말한다.

서버에서 HTML을 받아오면, 렌더링 엔진은 HTML을 파싱하여 DOM 트리를 생성하기 시작한다. 브라우저는 스타일시트, 스크립트 또는 이미지 등의 외부 자원에 대한 링크를 찾을때마다 요청을 시작한다.(HTTP/2에서는 Server Push로 해결) 이때, 렌더링 엔진은 HTML 파싱을 일시 중단하고, 외부 자원을 요청한다. 외부 자원을 받아오면, CSS 오브젝트 모델(CSSOM)을 생성한다. 이후, HTML 파싱을 재개한다. HTML 파싱이 완료되면, DOM 트리와 CSSOM이 결합되어 렌더 트리를 생성한다. 렌더 트리는 브라우저 화면에 표시될 요소들의 집합이다. 렌더 트리 생성이 완료되면, 렌더 트리의 각 노드를 화면에 표시한다(painted).

자세한 브라우저의 렌더링 과정은 추후 포스팅할 예정이다.