JS 동작원리 2편 - 최적화 (인라인 캐싱, 히든 클래스)

Inline Caching

인라인 캐싱은 js컴파일 과정에서 한번 참조된 데이터에 대해서는 기억해서

여러 번 데이터를 중복 참조하지 않도록 하는 최적화 방식이다.

컴파일을 할 때 처음 find함수는 data에 접근하여 속성 a, b를 가져온다.

하지만 이후부터는 find(data)는 문자열 a=1 b=2로 캐시에 저장되어

다시 데이터에 접근하는 것을 줄여주는 최적화 방식이며 인라인 캐싱은 히든 클래스를 기반으로 둔다.

 

Hidden Class

히든 클래스에 대해 더 정확히 알고싶다면 동적 타이핑과 동적 탐색 개념에 대한 학습을 추천한다.

만약 위와 같은 함수형 클래스인 Num이 있다고 했을 때

obj1과 obj2는 Num의 인스턴스 객체이다. 

 

크롬 콘솔창에서 두 객체의 히든 클래스를 확인할 수 있다.

(콘솔 입력 > 메모리 탭 스냅샷 > Num(클래스 이름) 검색)

x 속성 값이 1과 3으로 다르지만 map 항목의 아이디는 같은 것으로 나온다.

(객체 속성을 확인하려면 x속성을 num이 아닌 string타입으로 해야 함)

 

객체의 프로퍼티 변경사항은 새로운 히든 클래스를 생성시킨다.

객체의 프로퍼티의 개수나 순서, 타입 등이 변동되면 히든 클래스가 생성될 수 있다.

만약 위와 같이 a와 b라는 새로운 속성을 정의한다면 각 객체는 어떤 map아이디를 가지게 될까

프로토타입 객체는 여전히 같은 Num을 가리키고 있지만 map, 즉 히든 클래스 아이디는 각각 달라진 것을 확인할 수 있다.

원래 클래스에 정의되어 있는 x, y순으로 속성의 값을 변경시키면 기존의 히든 클래스를 사용함으로써

최적화에 도움이 될 수 있는 코드를 짤 수 있다.

JS에서 객체를 다룰 때에 기존의 틀의 형식을 보존하는 방식으로 코드를 작성하여 이후 값에 대한 참조 시 최적화 효율을 볼 수 있도록 한다.