크롬 V8엔진

크롬 V8엔진은 자바스크립트 성능을 비약적으로 발전시킨 엔진이다

 

어떤 방식으로 작동하기에 자바스크립트 성능을 끌어올린 것일까?

 

 

1. 크롬 V8엔진 동작 순서

 

크롬 V8엔진이 동작하는 순서를 정리해보자면

 

1. 엔진이 실행할 JS파일을 받는다

2. 파싱, AST를 구축하는 과정을 거친다

3. interpreter가 코드를 읽으며 실행한다

4. 코드를 수행하는 과정에서 프로파일러가 지켜보며 최적화할 수 있는 코드를 컴파일러에게 전달해준다

5. 주로 반복해서 실행하는 코드블록을 컴파일(최적화)한다

6. 원래있던 코드와 최적화된 코드(Optimized Code)를 바꿔준다

 

* Parser / AST 란?

 

Paser: Token을 가지고, 컴파일러가 사용할 AST를 생성

AST: 코드를 구조화된 트리로 만들어, 컴파일에서 사용할 수 있게 도와줌

 

자바스크립트는 실행되는 플랫폼에 따라 인터프리팅과 컴파일이 혼합되어 사용된다고 정리할 수 있다

 

브라우저는 html과 css를 이용해서 화면을 만들고, 자바스크립트를 이용하여 화면을 조작한다

크롬 브라우저는 크게 Blink라는 Renderer엔진(html,css)과 V8이라는 자바스크립트 엔진을 가지고 있다

 

V8엔진은 C++로 작성되었으며, ECMA-262에 기재된 ECMAScript 및 Webassembly를 처리할 수 있다

 

 

 

2. 크롬 V8 엔진 특징

 

(1) 자바스크립트 소스 코드를 컴파일, 실행

(2) 생성하는 Object를 메모리에 할당한다

(3) 가비지 콜렉션을 이용해 더 이상 사용되지 않는 Object의 메모리를 해제한다

(4) Hidden Class를 이용해 빠르게 프로퍼티에 접근한다

(5) TurboFan을 이용해 최적화된 코드로 만들어 속도 및 메모리를 최적화한다

 

 

3. 크롬 V8엔진 컴파일 과정

 

자바스크립트도 사람이 읽을 수 있는 코드이기 때문에, 기계가 읽을 수 있도록 기계어로 컴파일 해야한다

 

1) Blink에서 <script> 태그를 만다면, 자바스크립트 스트리밍을 시작한다

2) 스트리밍으로 전달받은 UTF-16문자열은 스캐너(scanner)를 이용해 토큰(let,for)을 생성한다

3) 생성된 토큰을 가지고, 파서(parser)가 추상 구문 트리(AST)를 만든다

4) 만들어진 AST는 컴파일러에서 byte code로 컴파일한다

5) 컴파일된 byte code를 실행함으로써 원하는 자바스크립트 동작이 실행된다

 

이때 컴파일한 내용을 V8에서는 최적화를 진행한다 (V8이 자바스크립트 성능을 극대화 했다고 하는 이유)

 

(1) byte code를 실행하면서, profiling을 통해 최적화 해야 하는 데이터를 수집한다

(2) profiling을 통해 찾은 데이터는 TurboFan을 통해 자주 사용되는 함수나 데이터를 기반으로 최적화를 진행하며, Optimized Machine Code를 생성한다

(3) 이후 Optimized Machine Code를 실행하며, 메모리 사용량을 줄이고, 기계어에 최적화되어, 속도와 성능을 향상시킨다

 

 

4. V8 Scanner와 Token

 

자바스크립트 파일을 Text로 이루어져 있으며, 이를 네트워크를 통해 다운받는다

V8에서는 이 Text정보를 parsing하기 전에, 일정한 형태의 UTF-16으로 변환하고, 스캐너를 이용해 토큰을 생성한다

 

* 토큰(Token)이란?

 

미리 정의한 항목과 개발자가 정의한 함수나 변수들

 

- 자바스크립트에 미리 정의되어 있는 for, const, if, function 같은 키워드들

- 공백이나 탭

- 변수나 함수 식별자

 

추가) 스캐너 단계에서 속도를 올리기 위해서는 소스 코드를 축소하고, 불필요한 공백이나 주석을 제거하고, 비 ASCII 식별자를 피하는 것이 좋다