[JavaScript] How JavaScript works (2) - inside the V8 engine + 5 tips on how to write optimized code

이 글은 Alexander Zlatkov의 "
How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code"를 번역한 글입니다.

Overview

JavaScript Engine 은 자바스크립트 코드를 실행하는 인터프리터입니다. JavaScript Engine 은 코드를 실행하는 인터프리터나 JavaScript를 바이트 코드로 변환시키는 컴파일러로 실행될 수 있습니다.

아래는 유명한 JavaScirpt Engine 입니다.

• V8: 오픈 소스이며, 구글에 의해 C++로 개발되었습니다.
• Rhino: 오픈 소스이며, Mozilla에 의해 Java로 개발되었습니다.
• SpiderMonkey: 첫 JavaScript Engine 으로, 전에는 Netscap Navigator, 현재는 Firefox의 엔진입니다.
• JavaScriptCore: 오픈 소스이며, 애플에 의해 개발되었습니다. Safari의 엔진입니다.
• KJS: Harri Porten에 의해 개발된 KDE의 엔진입니다.
• Chakra: IE와 Edge의 엔진입니다.

Why was the V8 Engine created?

V8 Engine 은 구글에 의해 C++로 작성된 오픈 소스 엔진입니다. 현재 크롬의 JavaScript Engine 이며, 다른 엔진들과는 다르게 Node.js runtime 에도 사용됩니다.

V8 은 브라우저에서 실행되는 JavaScript의 성능을 높이기 위해 개발되었습니다. 속도를 향상시키기 위해, V8 은 인터프리터를 사용하는 대신 JavaScript 코드를 기계어로 변환시킵니다. 다시 말해서, JIT(Just-In-Time) compiler 를 사용해서 런타임에 JavaScript 코드를 기계어로 컴파일합니다. 이 방식은 SpiderMonkey 나 Rhino 와 같은 요즘의 JavaScript Engine 과 동일한 방식입니다. V8 이 가지는 차별점은, byte code 와 같은 intermediate code 가 없다는 점입니다.

V8 used to have two compilers

V8 5.9 이전 버전의 엔진은 두 개의 컴파일러를 사용했습니다.

• full-codegen: 간단하고 매우 빠른 컴파일러로 약간 느린 기계어로 변환합니다.
• Crankshaft: 약간 복잡한 컴파일러로 최적화가 잘 된 기계어로 변환합니다.

V8 은 많은 쓰레드를 사용합니다.

• Main Thread 는 코드를 fetch하고, 컴파일 하고 실행합니다.
• 컴파일을 위한 별도의 쓰레드가 있습니다. Main Thread 에서 코드를 실행하는 동안 코드를 최적화합니다.
• Profiler Thread 는 런타임에 어떤 메소드가 오래 걸리는 지 파악하여 Crankshaft 가 최적화 할 수 있도록 합니다.
• 몇몇 쓰레드는 가비지 콜렉터를 관리합니다.

JavaScript 코드를 처음 실행할 때, V8 은 full-codegen 이 파싱된 JavaScript를 기계어로 바로 변환시킵니다. 이 과정을 통해 기계어를 매우 빠르게 실행할 수 있습니다. V8 은 intermediate code를 사용하지 않아 인터프리터를 불필요하도록 했습니다.

JavaScript 코드를 여러 번 실행하면, Profiler Thread 는 어떤 메소드를 최적화시켜야 하는가에 대한 충분한 데이터를 얻게 됩니다.

Crankshaft 의 최적화 과정은 다른 쓰레드에서 실행됩니다. JavaScript abstarct syntax tree 를 Hydrogen 이라고 불리는 high-level static singe-assignment 로 변환하고, 최적화합니다. 대부분의 최적화는 이 과정에서 일어납니다.

Inlining

첫 번째 최적화는 최대한 많은 코드를 미리 inlining 하는 것입니다. Inlining 은 함수를 호출하는 부분을 함수의 내용으로 바꾸는 것입니다. 이 간단한 과정을 통해서 이어지는 최적화 과정이 더욱 의미있는 과정이 됩니다.

function Point(x, y) {
  this.x = x
  this.y = y
}

const p1 = new Point(1, 2)

function Point(x, y) {
  this.x = x
  this.y = y
}

const p1 = new Point(1, 2)
p1.a = 5
p1.b = 6

const p2 = new Point(3, 4)
p2.b = 7
p2.a = 8