V8 엔진 알아보기

V8 엔진 알아보기

웹 브라우저 점유율 60% 이상(2024.01 기준)인 크롬 브라우저를 안 써본 사람은 없을 것이다. 자바스크립트 런타임이라고 불리는 크롬 브라우저, 안드로이드 브라우저, NodeJS 등은 그 내부에 자바스크립트 엔진이라는 구성요소를 가지고 있다.

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 역할을 하는데 우리가 알아볼 V8 엔진이 바로 자바스크립트 엔진이다.

먼저 자바스크립트 엔진이 무엇인지 어떻게 구성되어 있는지 간단히 알아보자!

자바스크립트 엔진

정의

자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있다. 여러 목적으로 자바스크립트 엔진을 사용하지만, 대체적으로 웹 브라우저에서 사용된다. - 위키

종류

  • V8 : 구글에서 만들었으며, C++로 작성되었다. 크롬, NodeJS 등에서 사용되고 있다.
  • Spider Monkey : 최초의 자바스크립트 엔진, 파이어폭스에서 사용되고 있다.
  • Webkit : 사파리에서 사용되고 있으며 애플에서 개발했다.
  • Chakra : MS에서 개발했으며, Edge에서 사용되고 있다.

싱글 스레드

자바스크립트는 싱글 스레드 프로그래밍 언어이다. 그럼 자바스크립트는 어떻게 비동기 처리를 할까? 프론트엔드 면접 단골 문제인 이벤트 루프를 공부하면 “아! 자바스크립트는 이렇게 비동기 처리를 하는구나”를 알 수 있다. 하지만 “그럼 이벤트 루프는 자바스크립트 엔진 안에 있는 건가?”라고 생각해서 찾아보면 아래와 같이 자바스크립트 런타임 아키텍쳐를 볼 수 있다.

자바스크립트 런타임 Architecture
자바스크립트 런타임 Architecture

내가 처음 공부할 때는 위 그림이 자바스크립트 엔진을 말하는 것인지 자바스크립트 런타임을 말하는 건지 검색해도 잘 안 나와서 헷갈렸었다. 위 사진은 자바스크립트 런타임이 맞고 왼쪽에 회색 박스 부분이 정확히 자바스크립트 엔진에 해당하는 부분이다.

자바스크립트 엔진만을 독립적으로 실행하지 않기 때문에 자바스크립트 엔진을 검색 해보면 자바스크립트 런타임과 관련된 글들이 많이 나오는 것이다.

자바스크립트 엔진은 하나의 메모리 힙과 콜 스택을 가지고 있다.

자바스크립트 엔진
자바스크립트 엔진

스레드에서 호출되는 함수들은 콜스택에 쌓이며 이 함수들은 LIFO로 실행된다. 위 구조로는 한 번에 하나의 일만 동기적으로 처리할 수 있다. 싱글 스레드인 자바스크립트 엔진이 자바스크립트 런타임의 구성요소인 이벤트 루프, 콜백 큐, Web API 등의 도움으로 비동기 처리를 할 수 있는 것이다.

정리

  • 자바스크립트는 싱글 스레드 기반 언어이고 싱글 스레드인 자바스크립트 엔진에서 작동한다.
  • 자바스크립트 런타임(브라우저, NodeJS)은 멀티 스레드로 작동한다.
  • 이벤트 루프, 콜백 큐, Web API 등은 자바스크립트 런타임의 구성요소이다.

V8 엔진

V8 엔진은 위에서 설명한 자바스크립트 엔진의 일종이다. 싱글 스레드인 V8 엔진은 자바스크립트 코드를 어떻게 실행할 수 있는지 알아보자.

작동 원리

  1. V8 엔진은 자바스크립트 소스 코드를 Parser로 보낸다.
  2. Parser는 소스 코드를 분석한 후, AST(Abstract Syntax Tree)로 변환한다.
  3. Ignition에서 AST를 중간 언어인 바이트 코드(Bytecode)로 변환한다.
  4. 인터프리터인 Ignition이 바이트 코드를 실행하면서 소스 코드가 작동하게 된다.
  5. 프로그램이 실행되는 런타임 과정에서 V8 엔진은 프로파일링을 통해 자주 실행되는 코드(Hot Spot)를 TurboFan으로 보낸다.
  6. TurboFan에서 자주 실행되는 코드를 최적화 컴파일해서 기계어(Machine Code)로 변환한다.

예시

위 과정에서 알 수 있듯이 V8 엔진은 자바스크립트 소스를 변환한 바이트 코드 전부를 네이티브 코드(기계어)로 컴파일하지는 않고 런타임 과정에서 프로파일링을 통해 자주 실행되는 코드만 네이티브 코드(기계어)로 변환한다.

이러한 방식을 AJITC(Adaptive Just In Time Compiler), 적응형 JIT 컴파일러 방식이라고 한다.

음… JIT 컴파일러가 뭔지 잘모르겠는데 AJITC라니.. JIT 컴파일러를 간단하게 알아보자.

JIT 컴파일러

JIT 컴파일러는 컴파일 방식과 인터프리터 방식을 모두 가지고 있다.

컴파일 : 프로그램을 실행하기 전 우리가 작성한 코드(JS 코드 등) 전부를 목적 코드(기계어 등)로 바꿔주는 것

인터프리터 : 프로그램을 실행하는 중 우리가 작성한 코드를 한 줄씩 해석(중간 언어로 변환)하여 바로 실행하는 것

JIT 컴파일러는 프로그램을 실행하기 전에 소스 코드를 중간 언어인 바이트 코드로 변환(컴파일)하고 프로그램 실행 중(런타임)에 필요한 부분을 컴파일해서 네이티브 코드(기계어)로 변환하고 실행한다.

JITC vs AJITC

JIT 컴파일러는 런타임에서 프로그램의 실행에 필요한 부분을 네이티브 코드(ex. 기계어)로 변환한 후 실행하는 반면에 AJIT 컴파일러는 모든 바이트 코드를 네이티브 코드로 변환하지 않고 프로파일링을 통해 최적화가 필요한 코드만 네이티브 코드로 변환한다.

추가로 현대 자바스크립트 엔진들은 대부분 AJITC 방식을 사용하고 있다.

Reference

개발자 단민 | 자바스크립트 엔진: "어, 아직 싱글이야" | JS 런타임에 대해 알아보자

자바스크립트 엔진과 런타임에 대해 이야기하기 전에, 자바스크립트 자체가 무엇인지 이해하는 것도 중요하다! 자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 브라우저에서 실행되는 스크립트 언어다. 실제로 자바스크립트는 웹 브라우저뿐만 아니라 다양한 환경에서 실행될 수 있으며, 이때 코드가 실행되는 환경을 “런타임(runtime)“이라고 한다. 특히 자바스크립트 엔진과 브라우저 런타임은 웹 개발에서 핵심 역할을 하는 주요 구성 요소다. 이 두 가지는 웹 애플리케이션의 동작과 성능에 중요한 영향을 미친다.   자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 핵심 구성 요소다. 가장 널리 사용되는 자바스크립트 엔진 중 몇 가지를 살펴보도록 하자. V8 (Google Chrome, Node.js) V8은 Google에서 개발한 자바스크립트 엔진으로, Chrome 브라우저와 Node.js에서 사용된다. V8은 JIT(Just-In-Tim…

https://www.jeong-min.com/49-js-runtime/
개발자 단민 | 자바스크립트 엔진: "어, 아직 싱글이야" | JS 런타임에 대해 알아보자

Basics of understanding Chrome’s V8 Engine

In order to understand and appreciate what the Chromes V8 engine is doing first one needs to know what a Javascript engine is.

https://medium.com/@duartekevin91/basics-of-understanding-chromes-v8-engine-c5c8ec61fa6b
Basics of understanding Chrome’s V8 Engine

V8 엔진은 어떻게 내 코드를 실행하는 걸까?

이번 포스팅에서는 구글의 V8 엔진이 어떤 방식으로 JavaScript를 해석하고 실행하는지 살펴 보는지에 대해 포스팅하려고 한다. V8은 C++로 작성되었지만 필자의 메인 언어가 C++이 아니기도 하고, 워낙 소스가 방대하기 때문에 자세한 분석까지는 아니라도 최대한 웹 상에 있는 정보들과 필자가 분석한 V8의 소스코드를 비교해가면서 살펴보려고 한다. V8 엔진이란? V8 엔진은 구글이 주도하여 C++로 작성된 고성능의 JavaScript & Webassembly 엔진이다. 또한 V8은 오픈 소스이기 때문에 V8 엔진 깃허브 레파…

https://evan-moon.github.io/2019/06/28/v8-analysis/#parsing-코드의-의미-파악하기
V8 엔진은 어떻게 내 코드를 실행하는 걸까?

JIT Compiler & Chrome V8 Engine

그래서 나왔습니다 🔥 A J I T C 🔥

https://velog.io/@kich555/JIT-Compiler-Chrome-V8-Engine
JIT Compiler & Chrome V8 Engine

자바스크립트 엔진의 최적화 방식 (AJITC)

JITC? 아니 나는 AJITC ... !

https://velog.io/@seorim6417/자바스크립트-엔진의-최적화-방식-AJITC?utm_source=oneoneone
자바스크립트 엔진의 최적화 방식 (AJITC)

What is a Just-In-Time (JIT) Compiler and How Does it Work?

Learn about JIT compilers, how they work, their uses in Java, their phases, advantages and disadvantages, as well as how they compare vs. interpreters and ahead-of-time compilers.

https://www.theserverside.com/definition/just-in-time-compiler-JIT
What is a Just-In-Time (JIT) Compiler and How Does it Work?

Understanding JIT compiler (just-in-time compiler)

he Just-In-Time (JIT) compiler is a component of the Java Runtime Environment that improves the performance of Java applications at run time. Nothing in the JVM affects performance more than the compiler, and choosing a compiler is one of the first decisions made when running a Java application—whether you

https://aboullaite.me/understanding-jit-compiler-just-in-time-compiler/
Understanding JIT compiler (just-in-time compiler)