[Javascript] 자바스크립트 엔진과 런타임

https://codesmoothie.tistory.com/26

[Javascript] 자바스크립트란 어떤 언어인가?

 

지난 블로그에서 자바스크립트란 어떤 언어인지 전체적으로 알아보았다. 그렇다면 자바스크립트 엔진이란 무엇일까?

 

자바스크립트 엔진(Engine)

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램이다. 모든 브라우저 자체에 자바스크립트 엔진이 존재한다. 가장 잘 알려진 엔진은 구글의 V-8이다. V-8은 크롬뿐 아니라 node.js에도 내장되어 있다. 다른 브라우저는 다른 자바스크립트 엔진을 사용한다. 

 

모든 자바스크립트 엔진은 항상 콜 스택과 힙을 가지고 있다. 콜 스택(Call Stack)은 실행(Execution) 컨텍스트(context)를 사용하여 코드를 실행시키는 곳이다. 힙(Heap) 메모리 저장소로 모든 객체를 저장하는 곳이다.

자바스크립트 엔진 정의

 

그렇다면 자바스크립트 코드가 어떻게 컴파일 되어 기계어로 변경될까? 이를 이해하기 위해서는 사전 지식이 조금 필요하다.

 

CS 공통 지식 : Compilation vs Interpretation

컴퓨터 프로세서는 0과 1만 이해한다는 것을 "자바스크립트란 어떤 언어인가"라는 블로그에 작성했다. 일반적으로 이러한 기계어로 변환하는 과정을 compilation 또는 interpretation으로 수행한다. 

 

Compilation에서는 전체 소스 코드가 한 번에 기계 코드로 변환된다. 이 기계 코드는 이동식(portable) 파일로 저장되어, 어떤 컴퓨터에서도 실행 가능하다. 자세한 과정을 살펴보면 총 2단계가 존재한다. 먼저, 기계 코드로 빌드되고, 이후 CPU안에 있는 프로세서에서 실행된다. 실행은 Compilation(컴파일)이 완료된지 한 참 이후에도 발생할 수 있다. 예를 들어, 현재 컴퓨터에서 실행 중인 응용 프로그램은 오랜 시간 전에 컴파일된 것일 수 있다.

 

Compilation 동작 방식

 

반면에 해석을 하는 Interpretation는 소스 코드를 살펴보며 한 줄씩 실행한다. 여기에서는 이전과 같은 두 단계가 존재하지 않는다. 대신 코드를 읽는 동시에 실행 시킨다. 물론 실행되기 직전에 소스 코드는 컴퓨터가 읽을 수 있는 기계 코드로 변경된다. 과거 자바스크립트는 순수 Interpretation 언어였다.

 

Interpretation 동작 방식

 

하지만, Interpretated 언어는 compiled 언어보다 속도가 현저히 느리다는 단점이 있다. 과거 이러한 단점은 크게 부각되지는 않았지만, 현재 자바스크립트 환경에서는 낮은 성능은 어울리지 않는다. 구글맵을 브라우저에서 사용하고 있는데 드래그가 늦게 반응한다고 생각해보라. 따라서 modern 자바스크립트 엔진은 Compilation과 Interpretation 방식을 혼합하였고, 이것을 "just-in-time compilation"이라고 부른다. 이러한 접근법은 기본적으로 모든 코드를 먼저 기계 코드로 컴파일 한 후, 바로 실행시키는 것이다. Compilation 이후 실행 시키는 것은 동일하지만, 이동식(portable) 파일은 존재하지 않으며 실행이 바로 일어나는 것이다. JIT 동작 방식을 더 자세히 알아보자.

Just-in-time(JIT) compilation 동작 방식

 

 

자바스크립트의 Just-in-time Compilation 

설명을 위해 자바스크립트 코드가 자바스크립트 엔진으로 들어간다고 가정하자.

 

1. 자바스크립트 엔진은 해당 코드를 읽을수 있도록 Parse한다. Parsing 프로세스 동안 코드는 AST(Abstract Syntax Tree)라는 데이터 구조로 변경된다. AST는 const나 function 키워드 처럼 먼저 코드를 여러 줄로 나누고 언어에 의미를 부여한다. 그런 다음 모든 조각을 구조화된 방식으로 트리에 저장한다. 이 단계에서 문법 에러를 확인한다. 결과로 나온 트리는 나중에 기계 코드를 생성하는데 사용된다. "const x = 23;"이라는 간단한 한줄 코드의 ASP 코드를 확인해보면 아래와 같이 복잡하다. AST가 어떻게 생겼고 문법을 알 필요는 없다. 참고로 AST 트리는 그저 엔진 내부의 전체를 나타난 것일 뿐 DOM 트리와 아무런 관련이 없다. 다음 단계는 Compilation이다.

 

 

2. 생성한 AST 코드를 기계 코드로 컴파일 한다.

 

3. 모던 자바스크립트는 Just-in-time compilation으로 Compilation된 기계 코드는 즉시 실행된다. 실행은 자바스크립트 엔진인 Call Stack에서 일어난다.

 

4. 최적화 되지 않은 기계 코드의 초기 버전을 가능한한 빠르게 실행되도록 최적화한다. 이를 위해 프로그램이 실행되는 동안 백그라운드에서 해당 기계 코드를 재컴파일(recompiled)한다. 각 코드의 최적화 과정이 끝나면 최적화 되지 않은 코드를 찾아 새로운 최적화를 시작한다. 이러한 과정이 V-8과 같은 최신 엔진의 속도를 빠르게 만들어 주는 것이다. 이러한 Parsing, Compilation, Optiomization 과정은 엔진 안의 특별한 threads 안에서 일어한다. 즉, 콜 스택을 실행 시키는 main thread와 완전히 분리된 채 일어난다.

 

 

자바스크립트 런타임(Runtime)

자바스크립트 런타임은 일반적으로 브라우저 내부에 있다. 자바스크립트 런타임은 자바스크립트를 사용하는데 모든 것이 담겨있는 큰 박스나 컨테이너이다. 자바스크립트의 런타입의 핵심은 항상 엔진이다.

 

다음으로 Web APIs가 존재한다. Web API는 DOM, Timers, console.log 등과 같이 항상 사용되는 것과 관련있다. 즉, Web API는 자바스크립트 언어와 별도로 자바스크립트 엔진에 제공되는 기능이다. 자바스크립트는 Global window 객체를 통해 해당 API에 접근한다.

 

콜백 큐(Callback Queue)가 존재한다. 콜백 큐는 실행 대기 중인 모든 콜백 함수 모여 있는 데이터 구조이다. 예를 들어, 이벤트 핸들러의 함수를 버튼 같은 DOM 요소에 추가했다고 가정해보자.

 

 

클릭 이벤트가 일어나면 해당 콜백 함수는 먼저 콜백 큐에 놓이게 된다. 그후 콜 스택이 비어있으면 해당 콜백 함수가 콜 스택으로 이동하고 실행되게 된다. 이러한 일을 가능하게 해주는 것이 바로 이벤트 루프이다.

 

이벤트 루프에 대한 자세한 설명은 아래의 링크를 참고하면 된다.

https://codesmoothie.tistory.com/9

[JavaScript] 비동기 코드의 동작 원리 - 이벤트 루프(The Event Loop)

 

 

브라우저가 아닌 환경에서의 런타임 환경

node.js의 경우 web APIs가 존재하지 않으며, C++ BINDINGS & THREAD POOL이라는 별도의 환경이 구성된다.