TIL 04 | 작동원리(V8)

JavaScript 엔진

컴퓨터는 0과 1로 두개의 값만 이해할 수 있다. 그렇다면 컴퓨터는 사용자가 작성한 자바스크립트 코드를 해석해서 어떻게 의도한 결과를 출력할 수 있을까? 거기에 대해서 한 번 이야기 해보려고 한다.

사람이 읽고, 쓰고 , 해석을 할 수 있도록 작성된 언어를 고차원 언어라고 하며, 사람에게서 멀어지고 기계에 가까워 질수록 저차원 언어가 된다.

이때 사용자가 자바스크립트 언어로 작성한 파일을 컴퓨터가 읽을 수 있도록 도와주는 프로그램이 바로 자바스크립트 엔진이다. 가장 대표적인 예로는 크롬의 V8엔진이 있다. V8 엔진을 기반으로 설명을 하겠다.

엔진의 구조

Parser : Lexical Analysis(코드의 의미를 이해하기 위해 토큰 작은 단위들로 코드를 쪼개는 일)를 진행한다.
AST : Abstract Syntax Tree의 약자로, parser에서 분해된 토큰(token)들을 기반으로 나무 구조를 만든다.(ex. DOM Tree, CSSOM Tree)

AST에서 생성된 나무 구조는 인터프리터와 컴파일러를 거쳐서 컴퓨터가 이해할 수 있는 Bytecode와 Optimized Code로 변환된다.

인터프리터와 컴파일러

고차원 언어를 기계가 이해할 수 있는 저차원 언어로 변환하는 방식은 인터프리터를 이용한 방식, 컴파일러를 이용한 방식 두 가지로 나뉜다.

• 인터프리터 : 코드를 한 줄 한 줄 읽어내려가며 한 줄씩 Bytecode로 변환한다.
• 컴파일러 : 한 줄 한 줄 번역하지 않고 파일 전체를 읽은 뒤, 코드의 의미를 해석하고 파일 전체를 기계어로 컴파일해서 변환한다.

인터프리터 VS 컴파일러

1. 인터프리터

• 장점 : 코드가 전체가 컴파일 된 완성을 되는 것을 기다릴 필요 없이, 한 줄 한 줄 변환하기 때문에 실행 속도가 빠르다. 자바스크립트는 웹을 위해 개발된 언어이고, 사용자에게 최상위 경험을 제공하기 때문에 빠르게 실행되는 것이 중요한 자바스크립트의 이상적인 코드 변환 형식이다.
• 단점 : 같은 코드를 여러 차례 반복하거나 또는 코드가 복잡해지면 점점 속도가 느려지게 된다.

2. 컴파일러

• 장점 : 작업을 단순화 시킨다. 컴파일 과정에서 함수를 반복하는 것이 아니라 함수의 결과물을 반복하도록 컴파일 한다. 즉, 불필요한 동작을 제거하고 컴파일러 방식을 최적화 한다.(인터프리터의 경우에는 최적화 하지 않는다.)
• 단점 : 코드를 바로 실행하지 않고, 코드 실행 전 컴파일 하는 과정이 필요하기 때문에 초기에 속도가 느릴 수 밖에 없다.

V8 엔진은 독특한 언어 변환 도구인 JIT Complier가 들어온다. Just In Time의 약자이다.

JIT Compiler 구동 방식

1. AST를 통해 나무 구조로 변환된 코드는 최초에 인터프리터에게 전달된다. 인터프리터는 빠르게 코드를 ByteCode로 변환한다.

2. 인터프리터가 코드를 실시간으로 변환하면서 브라우저에게 작업을 지시하는 동안 프로파일러는 입력 받은 코드에서 최적화 할 수 있는 부분을 찾아서 기록한다.

3. 최적화가 가능한 부분을 찾으면 프로파일러는 이를 컴파일러에게 전달하고, 컴파일러는 인터프리터에 의해 실시간으로 웹 사이트가 구동되는 동안 필요한 부분을 기계어로 변환하여 최적화를 진행한다.

4. 최적화된 코드를 수행할 차례가 다가오면, ByteCode는 대신 컴파일러가 변환한 코드가 그 자리를 대체하여 실행된다.