1. 탐구
1. Javascript 엔진
: Javascript 코드를 실행하는 프로그램 또는 인터프리터
Javascript는 브라우저 뿐 아니라 Node.js, Electron, React Native 등 프로젝트와 그 밖의 다양한 곳에서 동작한다.
2. Javascript 엔진 종류
- SpiderMonkey
- 최초의 자바스크립트 엔진
- 현재는 Mozilla 재단에서 관리
- FireFox에서 사용
- Chakra
- 마이크로소프트가 개발
- Chakra 엔진의 중요 부분은 Chakra Core라는 오픈 소스로 구성되어 있다.
- Edge 브라우저에 사용
- JavaScript Core
- 애플에서 개발한 JavaScriptCore는 처음에 WebKit 프레임워크를 위해 개발
- Safari와 React Native App에서 사용
- V8
- 구글이 개발
- 자바스크립트 엔진의 대표적인 예는 Google V8 엔진이다. C++로 작성되었으며
- Chrome과 Node.js에서 사용
- ECMASCript와 Web Assembly 표준에 맞게 구현
- 속도 향상을 위해 인터프리터를 사용하는 대신 JIT컴파일러도 사용
- 내부적으로 여러 개의 스레드를 사용한다.
- 메인 스레드는 코드를 가져와 컴파일하고 실행
- 컴파일을 위한 별도의 스레드가 있어서 이 스레드가 코드를 최적화하는 동안 메인 스레드는 쉬지 않고 코드를 수행
3. Javascript 엔진의 구성요소
1. Memory Heap
: 메모리 할당이 일어나는 곳
- 객체 타입 데이터가 저장
- 원시 타입 데이터는 콜스택(Lexical 환경)에 저장
- 객체타입 데이터가 저장된 메모리힙의 주소값은 callstack의 변수 식별자의 값으로 각각 저장
- Callstack에 할당되는 변수 식별자 자체는 callstack 상의 실행 컨텍스트의 Lexical환경이라는 곳에 저장
2. Call Stack
: 코드 실행에 따라 호출 스택(실행 컨텍스트)이 쌓이는 곳
- 코드를 읽어내려 가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것 들을 찾아서 작업을 수행하는 공간
- Javascript는 기본적으로 싱글 스레드 언어 기반 언어이다. 즉, 한 번에 하나의 작업만 처리할 수 있다.
4. V8
: Chrome과 Node.js에서 사용하는 Javascript 엔진
- C++로 작성
- ECMAScript 및 WebAssembly로 처리할 수 있다
특징
- Javascript 소스 코드를 컴파일하고, 실행
- 생성하는 객체를 메모리에 할당
- Garbage Collector를 이용해 더 이상 사용하지 않는 객체의 메모리를 해제
- Hidden Class를 이용해 빠르게 프로퍼티에 접근
- TurboFan을 이용해 최적화된 코드로 만들어 속도 및 메모리를 최적화
JIT 컴파일러
- Javascript코드를 Interpreter방식으로 컴파일하고, 이를 Bytecode로 만든다.
- Compile속도를 높이기 위해 ByteCode를 캐싱해두고, 자주 쓰이는 코드를 인라인 캐싱과 같은 최적화 기법으로 최적화한 후, 이후 Compile시 참조하여 속도를 높인다.
- 이로써 Interpreter의 느린 실행 속도를 개선한다.
V8 컴파일 과정
- Blink(렌더링 엔진)에서
- 스트리밍으로 전달받은 UTF-16문자열은 Scanner를 이용해 Token 생성
- 생성된 Token으로 Parser가 AST(추상 구문 트리) 생성
- AST는 Compiler(Ignition)에서 Byte Code로 컴파일
- 컴파일된 Byte Code를 실행하여 JS 동작
이 과정에서 최적화를 진행한다.
- Byte Code를 실행하며 Profiling을 통해 최적화 해야 하는 데이터 수집
- Profiling를 통해 찾은 데이터는 TurboFan을 통해 자주 사용되는 함수나 데이터를 기반으로 최적화 진행 → Optimized Machine Code 생성
- Optimized Machine Code를 실행하며, 메모리 사용량을 줄이고, 기계어에 최적화되어 속도와 성능 향상
2. 궁금증
1. 그럼, Chrome은 V8을 쓴다는거야, Blink를 쓴다는거야?
V8은 Javascript 엔진이다. 웹페이지에서 Javascript 코드를 실행하기 위해 사용된다.
Blink는 렌더링 엔진이다. HTML, CSS, JS같은 웹 표준을 해석해서 사용자가 볼 수 있게 시각적 요소로 표시한다.
Blink에 대해서 더 알아보자
Blink는 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크이다.
- Webkit을 포크하여 만들어졌으며, Webkit의 문제점을 개선하고 추가 기능을 구현하기 위해 사용한다.
- Chrome, 오페라, 비발디, 웨일, 안드로이드의 웹뷰, 삼성 인터넷 등에서 사용 중이다.
- Chromium을 위한 렌더링 엔진임을 Chromium 오픈소스 내부에서 선언하고 있다.
2. Webkit은 Javascript엔진인데, Safari에는 Blink같은 렌더링 엔진이 없는거야?
Webkit은 Javascript 엔진과 렌더링 엔진을 모두 포함하는 브라우저 엔진이다.
3. Chromium은 Chrome과 다른거야?
- Chromium : 오픈소스 프로젝트에서 만든 브라우저 이름
- Chrome, Edge, 오페라, 네이버 웨일, 삼성 인터넷 등 Chromium기반으로 제작된다.
- Chrome : Chromium에 여러가지 기능 및 요소를 추가하여 탄생한 것
- 오픈 소스가 아니다
4. 이전에 들었던 JavascriptCore는 또 뭐야?
JavascriptCore는 Webkit에 내장된 Javascript 엔진이다.
V8엔진에 대해 한 번 더 짚어보자
V8엔진은 Google에서 개발한 오픈소스로, 가장 대중적인 Javascript 엔진이다.
- C++로 개발하였고 Node JS런타임 및 Chrome 브라우저에서 사용한다.
- Javascript 엔진 : Javascript코드를 마이크로프로세서가 이해할 수 있게 기계어로 변환해서 실행하는 프로그램 또는 인터프리터
- V8엔진은 인터프리터의 느린 수행속도를 개선하기 위해 JIT컴파일러를 사용하였다.
정리하자면
Android의 Chrome브라우저는 Javascript을 해석하기 위해 V8엔진을 사용하고, 브라우저 렌더링을 수행하기 위해 Blink엔진을 사용한다. 여기서 Blink엔진은 Webkit을 보완하기 위해 등장한 엔진이다.
그리고 iOS의 Safari 브라우저는 Webkit으로 브라우저 렌더링을 수행하고, Webkit 내에 내장된 JavascriptCore엔진으로 Javascript를 해석한다.
추가로, Chromium은 브라우저를 만들기 위한 오픈소스 프로젝트로, Chromium기반으로 Chrome이 제작되었다. V8엔진은 Javascript라는 인터프리터 언어에 JIT컴파일러를 추가하여 성능을 개선하였으며 Chrome과 NodeJS에서 사용된다.