JS. 자바스크립트 히든 클래스

자바스크립트를 공부하긴 했는데 JS라는 친구에 대해 내가 너무 몰랐던 거 같다. 그래서 면접을 준비하며 구글에 존재하는 정보들을 수집해 나가면서 노션에 정리했었다. 그래서 자바스크립트 동작 구조에 대해 이야기할까 아니면 자바스크립트 코드가 돌아가는 실행 콘텍스트에 대해서 이야기할까 고민하다가 그냥 자바 스크립트 히든 클래스에 대해서 정리하려 한다 왜냐면 위의 두 내용은 너무 양이 많아서 잘 정리하신 분들의 글들을 공유하려고 한다.

자 그럼 히든 클래스 만나러 가자

히든 클래스는 자바스크립트 엔진의 최적화 기법 이야기하면서 언급된다. 먼저 왜 히든 클래스를 사용하는지 이유부터 알고 가자

자바스크립트는 동적 타이핑 언어로 코드를 실행할 때의 상황에 따라 데이터 타입이 정해진다고 한다. 그래서 문제가 동적으로 정해지는 코드는 프로퍼티의 메모리 오프셋을 컴파일 타임에 알 수가 없다. 그래서 프로퍼티 값을 읽을 때마다 동적 탐색하여 읽는다고 한다.

이 얘기만 딱 봐도 정적 타이핑 보다는 느릴 거 같다. 정적 타이핑은 위와 거의 반대로 특징을 가질 테니까. 그래서 이 탐색을 피하기 위해서 우리의 Hidden Class가 나왔다. 

어떤 식으로 구현 되냐면, 객체를 만들 때 히든 클래스라는 객체를 만들어 오프셋 정보를 저장하는 것이다. 이해하기 쉽게 그림으로 보자. 그림 출처는 https://meetup.toast.com/posts/78 여기다.

그림을 보면 객체 선언 후에 프로퍼티가 생성됨에 따라 구조체가 따로 또 만들어진다. 그리고 그 히든 클래스들이 만들어 질때 마다 가리키게 되어있다. 

특징을 간단히 정리해 보자

• 객체는 반드시 하나의 히든 클래스를 참조한다.
• 히든 클래스는 각 프로퍼티에 대해 메모리 오프셋을 가지고 있다.
• 동적으로 새로운 프로퍼티가 만들어질 때, 혹은 기존 프로퍼티가 삭제되거나 기존 프로퍼티의 데이터 타입이 바뀔 때는 신규 히든 클래스가 생성되며, 신규 히든 클래스는 기존 프로퍼티에 대한 정보를 유지하면서 추가적으로 새 프로퍼티의 오프셋을 가지게 된다.
• 히든 클래스는 프로퍼티에 대해 변경이 발생했을 때 참조해야 하는 히든 클래스에 대한 정보를 갖는다.
• 객체에 새로운 프로퍼티가 만들어지면, 현재 참조하고 있는 히든 클래스의 전환 정보를 확인한 후, 현재 프로퍼티에 대한 변경이 전환 정보의 조건과 일치하면, 객체의 참조 히든 클래스를 조건에 명시된 히든 클래스로 변경시킨다.

그런데 위에서 말했지만 최적화 기법이라는데 사실 잘 모르겠다. 메모리 소모는 줄어들 거 같은데 성능은 잘 모르겠다. 그래서 나온 게 Inline caching이다. 이 인라인 캐싱 까지 해줘야 히든 클래스가 완벽해지는 거 같다. 내 생각 ㅎ

인라인 캐싱은 간단히 말하면 오프셋 값을 미리 캐싱해두겠다는 것이다.

두가지 가정이 있다고 한다.

• 동적인 언어라고 해봤자 실제로는 안 바뀌는 게 더 많다
• 성능을 빠르게 하려면 딴 거 다 필요없고 루프를 노려라

어차피 루프 안에서 프로퍼티 변경될 일 많이 없으니까 캐싱 효율 좋을 거 아니야?? 뭐 이런 거.

 

결론을 적어 보면 좋은 블로그에서 정리를 해 주셨다.

 

자바스크립트 코드를 작성하면서 신경 쓸 수 있는 부분은 배열 내의 객체들을 반복해서 접근할 때, 하나의 배열 안에는 모두 같은 필드 구조를 가지는 (같은 hidden class를 가지는) 객체들만 넣어서 접근하도록 해 주는 정도가 될 것 같다고 말씀하신다.

 

참고 : https://meetup.toast.com/posts/78

자바스크립트 엔진의 최적화 기법 (2) - Hidden class, Inline Caching : NHN Cloud Meetup

https://engineering.linecorp.com/ko/blog/v8-hidden-class/ 

V8의 히든 클래스 이야기 - LINE ENGINEERING

https://crmrelease.tistory.com/79

[개념정리] 자바스크립트 엔진 v8이 사용하는 Hidden Class, Inline Cacahing