📖Hidden Class와 inline caching

이번 포스팅에는 자바스크립트의 Hidden Class와 inline caching에 대해 정리해 보자! 평소에 궁금했던 내용이었는데 다른 내용을 검색하다가 우연히 알게되어 정리해본다.

이 포스팅은 https://richardartoul.github.io/jekyll/update/2015/04/26/hidden-classes.html 을 참조하여 작성되었습니다.

신기한 자바스크립트

자바스크립트에서 우리는 런타임 환경에서 객체에 새로운 프로퍼티를 추가 할 수 있다.

let person = {
  name: ["Bob", "Smith"],
  age: 32,
  gender: "male",
  interests: ["music", "skiing"],
};

person.hobby = "coding";
console.log(person.hobby); // coding

이러한 부분은 다른 언어와 구별되는 자바스크립트만의 특별한 개성이라고 할 수 있다. 그런데, 이렇게 동적으로 추가되는 프로퍼티들도 객체에 맵핑이 될텐데, 어디에 저장되는걸까?

또 객체는 새로운 프로퍼티의 위치를 어떻게 기억해서 접근할 수 있는 것일까?

객체 관리 방식

Java나 C++같은 언어에서 객체의 프로퍼티들은 컴파일 전에 결정된다. 쉽게 말해서 컴파일 전에 이미 해당 Class나 객체가 몇 byte를 차지하게 될지 알 수 있다는 뜻이다.

그 이유는 Java나 C++ 같은 컴파일 언어에서 객체는 런타임에 프로퍼티를 동적으로 추가 또는 삭제할 수 없기 때문이다. 따라서 객체에서 각각의 프로퍼티가 어디에 위치할 것인지 혹은 객체가 시작되는 메모리 주소로부터 특정 프로퍼티 사이의 고정 offset값을 알 수 있다.

하지만 런타임중에 객체의 프로퍼티를 추가 할 수 있는 자바스크립트에서는 해당 길이에 대한 정의가 불가능 하다.

그러면 이렇게 자바스크립트에서 동적으로 추가되는 프로퍼티는 어디에 할당이 되고 객체의 관리는 어떻게 이루어지는지 알아보자!

Hidden Class!

V8 자바스크립트 엔진에서는 객체 프로퍼티의 효과적인 접근을 위해 hidden class 방식을 이용한다. 쉽게 말하면, 하나의 숨겨진 class를 하나 두어 각 객체 프로퍼티의 offset 정보에 관한 정보를 가지고 있는 방식이다. 그 이후 새로운 프로퍼티가 추가될 때 마다 새로운 hidden class를 만들어 매치한다.

let obj = {}

위 처럼 빈 객체가 하나 하나 만들어 지면, hidden class C0(가칭)이 생성되어 object는 hidden class인 C0에 등록된다.

obj.x = 1;

이후 동적으로 x라는 프로퍼티가 추가되면, 새로운 hidden class인 C1이 생성되며 기존 object는 새롭게 생성된 hidden class인 C1과 연결된다.

기존의 C0 hidden class는 없어지지 않고, 만약 새로운 빈 obj가 만들어 진다면, C0과 매핑되게 된다. 또한 C0 hidden class에는 '너가 만약 이 object에 'x'라는 프로퍼티를 추가한다면, C1으로 가면 돼!' 라는 C1과의 맵핑 정보도 추가된다.

obj.y = 2;

이후 새롭게 y라는 프로퍼티가 추가됐을때, 새로운 hidden Class인 C2가 생성되고 object는 C2와 연결된다. 새로 만들어진 hidden class는 기존의 x에 대한 offset과 함께 추가된 프로퍼티 y의 offset을 가지고 있다.

이 때 마찬가지로 C1 hidden class에는 '너가 만약 이 object에 'y'라는 프로퍼티를 추가한다면, C2로 가면 돼!' 라는 C2과의 맵핑 정보가 추가된다.

그러니까 쉽게 말하면, 객체의 프로퍼티가 추가 될 때마다 해당 프로퍼티의 메모리 offset을 기억 하는 히든 클래스를 새로 만드는 것이다! 그리고 프로퍼티에 접근할 일이 있을 때마다 히든 클래스를 참조해 해당 프로퍼티의 메모리 offset 정보를 얻게 된다.

정리해보면 다음과 같다.

1. 객체는 모두 하나의 hidden class와 연결되어있다.
2. hidden class는 각 프로퍼티에 대한 메모리 오프셋을 가지고 있다.
3. 새로운 프로퍼티가 추가됐을 시에는 새로운 hidden class가 형성되고 맵핑된다.
4. 같은 프로퍼티를 가진 객체를 두개 이상 생성해도 하나의 hidden class를 공유한다.

Inline Caching

자, 그럼 이번에는 hidden class와 함께 같이 사용되는 inline caching에 대해서 알아보자. 😁

hidden class를 이용한다고 하더라도 결국 특정 프로퍼티에 접근하기 위해서는 메모리에 두번 접근하는 과정을 거쳐야 한다. hidden class에 먼저 접근하여 offset 정보를 가져 온 뒤 ,얻은 offset를 통해 실제 프로퍼티에 접근해야 하기 때문이다.

조금 더 효율적인 프로퍼티 접근을 위해 자바스크립트는 hidden class 이외에 추가적으로 inline caching도 함께 사용한다.

inline caching이란 말그대로 hidden class의 offset을 caching하는 것을 의미한다. offset 값을 caching해 놓으면 hidden class에 대한 접근을 생략하고 바로 해당 메모리에 접근이 가능하기 때문에 성능을 향상 시킬 수 있다.

결론

따라서, 성능을 향상시키기 위해서는 다음과 같은 방식을 지키는 것이 좋다.

1. 같은 프로퍼티를 갖는 객체가 같은 hidden class를 공유하도록 하기 위해, 같은 순서로 프로퍼티를 선언한다.
2. 되도록이면 초기화 할때 프로퍼티를 모두 선언해 놓는다. 동적으로 추가하는것은 hidden class의 변화를 초래하므로 좋지 않다.
3. inline caching의 cache hit율을 높이기 위해서는 한번만 실행되는 여러가지의 method들을 정의하는것 보다, 같은 method를 여러번 실행하는것이 좋다.