V8 엔진이란?

V8 엔진은 Google이 개발한 오픈소스로 가장 대중적인 자바스크립트 엔진입니다.
C++로 개발하였고 Node JS 런타임 및 Chrome 브라우저에서 사용되고 있습니다.

자바스크립트 엔진이란?

컴퓨터는 0과 1밖에 이해하지 못하는 낮은 수준의 언어입니다. 하지만 고수준 언어인 자바스크립트 파일을 이해하고 명령을 수행할 수 있습니다. 인간이 작성한 자바스크립트 파일을 컴퓨터가 읽을 수 있는 것은 자바스크립트 엔진이 있기 때문에 가능합니다.
자바스크립트 엔진은 일련의 과정을 거쳐서 컴퓨터에게 최적화된 코드로 변환하여 전달하게 되고, 이러한 과정으로 인해서 컴퓨터가 자바스크립트 파일을 이해하고 수행할 수 있는 것입니다.
즉, 자바스크립트 엔진은 자바스크립트 코드를 마이크로프로세서가 이해할 수 있게 기계어로 변환해서 실행하는 프로그램 또는 인터프리터를 말합니다.

컴파일러와 인터프리터

V8엔진이 어떻게 작동하는지 알아보기 전, 프로그래밍에서 사용하는 두 가지 번역 방식에 대해 먼저 알아봅시다.

🗣 인터프리터
자바스크립트 파일을 입력받으면 코드를 한 줄 한 줄 해석하면서 기계어로 번역하는 방식입니다. 코드를 실행하기 전 컴파일 단계가 없기 때문에 실행 속도가 빠르다는 장점이 있습니다.

🗣 컴파일러
자바스크립트 코드를 입력받으면 파일 전체를 읽은 뒤, 이를 컴파일하여 기계어로 변환합니다. 그리고 이 기계어(Machin Code)는 CPU로 입력되어 코드가 실행됩니다.
컴파일러는 작업을 단순화 시키는 장점이 있습니다. 예를 들어 특정 함수를 10억번 반복해야 할 경우, 컴파일 과정에서 함수를 반복하는 것이 아니라 함수의 결과물을 반복하도록 컴파일합니다. 이처럼 불필요한 동작을 제거하는 컴파일러의 방식을 최적화(Optimization)이라고 합니다.

V8 엔진이 만들어진 이유

V8은 웹 브라우저 내부에서 자바스크립트 수행 속도의 개선을 목표로 처음 고안되었습니다.
이전에 여러 자바스크립트 엔진이 사용되고 있었지만 다른 자바스크립트 엔진은 웹 특성상 유저와 상호작용을 위해 즉시성이 있는 인터프리터 방식을 사용하는데, 이는 코드가 많아질수록 속도가 느려진다는 단점이 있습니다. 이 점을 보완해서 속도 향상을 위해 v8엔진은 인터프리터를 사용하는 대신 JIT(Just In Time) 컴파일러를 구현함으로써 코드 실행 시에 자바스크립트 코드를 머신 코드로 컴파일합니다.

왜 머신 코드로 컴파일해야할까?

사진 출처 : https://blog.naver.com/tipsware/221041215416

우리가 사용하는 컴퓨터 안에는 마이크로프로세서라는 작은 기계가 있는데, 이것은 CPU의 핵심 기능을 통합한 집적 회로(IC)입니다. 프로그래머가 어떤 코드를 짜서 컴퓨터에게 일을 시키려면 결국 이 마이크로프로세서가 해석할 수 있는 언어로 전달해야 합니다. 마이크로프로세서는 이것을 만든 회사나 버전에 따라 각자 다른 언어를 사용합니다. 이 언어들은 하드웨어와 직접적으로 소통할 수 있는 코드들이고 그래서 기계어, 머신 코드라 불립니다. 그러니까 결국 프로그래머들은 프로그래밍 효율을 위해 추상화 수준이 높은 고수준 언어를 사용해서 코딩을 하지만 이는 결국 머신 코드로 컴파일되어야만 CPU가 이해하고 처리를 할 수 있다는 말입니다.

JITC 컴파일러

JIT 컴파일 (just-in-time compilation) 또는 동적 번역 (dynamic translation)은 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법입니다. Just In Time Compiler로 프로파일링을 통해 최적화 할 코드를 선별한 후 해당 코드들만 컴파일합니다. 이 기법은 프로그램의 실행 속도를 빠르게 하기 위해 사용됩니다.

아래는 V8의 작동방식입니다.

사진 출처 : JSConf EU 2017에서 발표한 Franziska Hinkelmann님의 자료

1. Parser

V8 Engine는 자바스크립트 소스코드를 가져와서 Parser에게 보냅니다.
Parser는 낱말 분석(Lexical Analysis) 이라는 과정을 통해 코드를 토큰으로 분해합니다.
ex) ar a = 5 → ['var' , 'a' , '=' , '5']

2. AST (Abstract Syntax Tree)

Parser에서 분해된 토큰을 바탕으로 AST tree를 생성합니다.

3.  Interpreter Ignition → Bytecode

AST에서 나온 코드가 인터프리터(Ignition)에게 전달됩니다.
💡var 호이스팅은 참고로 이단계에서 이루어집니다.
인터프리터인 Ignition에서는 코드를 빠르게 AST를 Bytecode로 '중간 번역' 하고 실행시킵니다.

Bytecode
고수준 언어로 작성된 소스 코드를 가상머신이 한결 편하게 이해할 수 있도록 중간 코드로 한번 컴파일 한 것을 의미합니다.
CPU가 아닌 VM(Virtual Machine, 가상머신)에서 이해할 수 있는 코드를 위한 이진 표현법입니다. 즉, 가상 머신이 이해 할 수 있는 0과 1로 구성된 이진 코드입니다.

Ignition을 개발할 때는 모든 소스를 한번에 해석하는 컴파일 방식이 아닌 한줄씩 실행될 때마다 해석하는 인터프리터 방식을 채택하여 세가지 이점을 가져가고자 했습니다.

1. 메모리 사용량 감소
   자바스크립트 코드에서 기계어로 컴파일 하는 것보다 바이트 코드로 컴파일하는게 더 편합니다
2. 파싱시 오버헤드 감소
   바이트 코드가 간결하기 때문에 다시 파싱하기 편리합니다.
3. 컴파일 파이프 라인의 복잡성 감소
   Optimizing이든 Deoptimizing이든 바이트 코드 하나만 생각하면 되기 때문에 편합니다.

4. Bytecode 실행 → TurboFan → Optimized

코드를 점화하여 Bytecode를 생성 및 실행합니다. V8 Engine은 런타임 과정 중 Profiler에게 지속적인 프로파일링(함수나 변수들의 호출 빈도와 같은 데이터를 모으라고 시킵니다)을 통해 Hot spot 즉 반복되어 사용하는 코드 등 과열지점을 찾습니다. Bytecode가 실행될 때 Profiler는 프로파일링 데이터를 수집하여 최적화 할 수 있는 부분을 기록합니다.

5. 컴파일러는 프로파일러에게 전달받은 내용을 토대로 기계어로 변환하여 최적화를 진행

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

💡 만약 최적화 컴파일을 진행했더라도, 변수의 타입이 바뀐다든지 같은 동적 환경의 변수에 따라 네이티브 코드를 다시 바이트 코드로 Deoptimizing하기도 합니다. Deoptimizing된 코드도 상황에 따라서 얼마든지 다시 최적화 컴파일링되기도 합니다.

6. 최적화한 코드를 수행할 차례가 되면 Bytecode 대신 Optimized code가 실행

최적화 코드를 수행할 차례가 다가오면, Bytecode 대신 컴파일러가 변환한 최적화된 코드가 그 자리를 대체하여 실행됩니다.
최적화 기법으로는 히든 클래스(Hidden Class)나 인라인 캐싱(Inline Caching) 등 여러가지 기법을 사용합니다. 히든 클래스는 비슷한 놈들끼리 분류해놓고 가져다 쓰는 것, 인라인 캐싱은 자주 사용되는 코드가 만약 hello()와 같은 함수의 호출부라면 이걸 function hello () { ... }와 같이 함수의 내용으로 바꿔버리는 것입니다. 말 그대로 캐싱(Caching)입니다.

---

https://evan-moon.github.io/2019/06/28/v8-analysis/#v8-엔진의-작동원리를-살펴보자
위의 포스팅 내용에서 가져왔습니다.

여기서 사용되는 용어들이 굉장히 재미있는데, V8은 원래 8기통 엔진의 종류를 의미하는 단어입니다. 제네시스 G90이나 기아 K9같은 차에 들어간다고 한다.

(어쩐지 검색하면 엔진만 나오더라…)
그럼 Ignition은 뭐냐면 엔진에 시동걸 때 사용하는 점화기입니다. 내 소스 코드가 부릉부릉 실행되는 것입니다. 그러다가 너무 많이 호출되서 내 코드가 뜨거워지면 TurboFan으로 최적화해서 너무 과열되지 않게 식혀주는 그런 느낌입니다. ( 분명 노리고 네이밍한것같다 )
V8 분석 포스팅에서 컴파일 파이프라인을 설명할 때 빠지지 않던 Full-codegen과 Crankshaft는 어디로 갔냐 하면…

V8 v5.9부터 처음으로 Ignition과 TurboFan은 자바스크립트 실행을 위해 전체적으로 사용됩니다. 또한 V8의 v5.9부터 V8을 잘 지탱해준 기술이었던 Full-codegen과 Crankshaft는 새로운 자바스크립트의 기능과 이러한 기능들이 요구하는 최적화 기능을 더 이상 따라갈 수 없기 때문에 V8에서 더 이상 사용되지 않습니다. 우리는 이것들을 곧 완전히 제거할 계획이며, 이는 V8이 앞으로 훨씬 더 단순하고 유지 보수 가능한 아키텍처를 갖게 된다는 것을 의미합니다.

V8 team Launching Ignition and TurboFan

V8의 v5.9부터 사용되지 않습니다!

---

마치며

V8 엔진에 대해 깊게 생각해본적 없었는데, 기업 과제를 준비하면서 공부할 수 있는 계기가 되었습니다.
자바스크립트를 실행해주는 엔진이다 정도만 알았지 이 엔진이 뒤에 이렇게 많은 일을 하고 있을 줄은 몰랐어요..!
🤩 다음 주제는 브라우저 구조에 관한 내용인데 이번에는 어떤 흥미로운 내용이 나올지 기대중입니다!!

---

🔗 참고 링크
https://velog.io/@hahan/V8-엔진이란
https://velog.io/@tastestar/V8-엔진
https://velog.io/@godori/JavaScript-engine-1
https://velog.io/@sapphire317/V8-엔진-무엇일까
https://engineering.huiseoul.com/자바스크립트는-어떻게-작동하는가-v8-엔진의-내부-최적화된-코드를-작성을-위한-다섯-가지-팁-6c6f9832c1d9
https://velog.io/@cheal3/JavaScript-자바스크립트의-작동-원리
https://alledy.netlify.app/posts/v8-engine/
https://dkwjdi.tistory.com/194
https://evan-moon.github.io/2019/06/28/v8-analysis/
https://velog.io/@kich555/JIT-Compiler-Chrome-V8-Engine