[JS] 자바스크립트 엔진과 ATS, 히든클래스, 가비지 콜렉션

dev 2022년 2월 7일

<1> 자바스크립트 엔진과 ATS, 히든클래스, 가비지 콜렉션

자바스크립트는 싱글스레드, 동기식 프로그래밍 언어이다. 이 말은 스크립트가 돌아가고 있을 때 자바스크립트 엔진은 코드를 줄 하나씩 위에서 아래로 실행한다는 뜻이다.

Credits- Yair Cohen

1.Javascript Engine

  • 모든 자바스크립트 프로그램은 특별한 실행환경이 필요하다. 왜냐하면 우리 컴과 기계들은 Javascript 문법을 모르니까
  • 컴과 기계들은 기계어만 이해하니까 Javascript 코드를 기계어로 변환해야한다.
  • Javascript엔진은 여러개가 있는데 젤 유명한게 구글의 v8엔진, 파폭의 SpiderMonkey, 사파리의 javascriptCore가 있다.
  • ECMAScript는 이렇게 각기 다른엔진에서 js 언어를 해석할때 공통적으로 유지되도록 만들어진 기준이다.

2.Parser / Syntax Parser

  • 모든 Javascript 엔진은 Javascript문법 에러를 검사하는 파서가 있다.
  • 문법 에러가 발견되면 에러를 표시하고, 에러가 없으면 파서가 AST 를 생성한다.

3.AST(추상구문트리)

  • Javascript 코드를 구조적으로 표현한 트리이다.
  • AST는 왜 만드냐? 기계어 코드로 변환을 쉽게 만들기 위해서

4.인터프리터

  • 인터프리터는 AST를 가져와서 구문 분석하고 중간표현으로 변환한다.
  • 중간표현은 Javascript 같은 언어에서 기계어 코드로 변환하는 사이의 중간 다리 같은 역할을 한다.
  • 중간표현에 있을 때 코드 최적화하는 것이 더 쉽다.

5.컴파일러

  • 중간표현을 받아서 최적화 후 기계어로 변환해주는 것이 컴파일러이다.

6. 히든클래스와 인라인캐싱, 가비지 콜렉팅

  • Javascript는 동적 타이핑 언어기 때문에 코드를 실행할 때의 상황에 따라 데이터의 타입이 정해진다. 그렇기 때문에 객체의 프로퍼티에 접근하는 속도가 정적타이핑 언어에 비해 느릴 수 있다.
  • 정적 타이핑언어는 type을 정한 순간 얼만큼의 메모리가 할당되어야하는지 정해지기 때문에 오프셋이 결정되지만 동적 타이핑 언어는 그런것을 미리 결정할 수가 없다. 그래서 특정 객체의 프로퍼티에 접근할 때마다 동적탐색을 통해 프로퍼티를 스캔하고 찾아내야 하는데 이 때문에 리소스가 많이 들고 느린 것이다.
  • 메모리에서 Javascript 객체는 해시테이블에 저장된다. 근데 이런 해시테이블이 있는 객체의 프로퍼티 검색은 상당히 느리다.
  • V8엔진이 제공하는 히든클래스가 그 문제를 해결하는 데 도움을 주는데 , 히든클래스는 객체에서 프로퍼티를 탐색하는 데 걸리는 시간을 단축해준다. 유사하게 보이는 객체간에 히든클래스를 공유해서 수행된다. 어떻게 공유하냐면 Javascript 객체가 생성되면 히든클래스가 할당된다.

(1) 히든클래스의 특징

  • 객체는 반드시 하나의 히든클래스를 참조한다.
  • 히든클래스는 각 프로퍼티에 대해 메모리 오프셋을 갖고 있다.
  • 동적으로 새로운 프로퍼티가 만들어질 때, 또는 기존 프로퍼티가 변경, 삭제될 때 새로운 히든클래스가 생성되고 그 새 히든클래스는 기존 프로퍼티의 정보를 유지하면서 추가로 새 프로퍼티의 오프셋을 갖게 된다.
  • 히든클래스는 프로퍼티가 변경이 생겼을 때 참조해야하는 히든클래스에 대한 정보를 가진다.

(2) 인라인캐싱이란?

인라인캐싱은 반복문 내의 객체 접근 할때 조회작업을 생략해서 성능향상을 이끌어내는 기법이다.

  • 호출됐던 함수는 또 호출될 가능성이 높다는 것에 착안되었다.
  • 같은 메소드에 대해 반복되는 호출은 같은 타입의 객체에 이뤄진다
  • 인라인캐싱은 조회(lookup) 작업을 생략한다.
  • 인라인캐싱은 접근하려는 필드의 오프셋값을 저장한다는 것

(3) 가비지 콜렉팅

  • Javascript는 가비지 콜렉팅을 해주는 언어다.
  • 함수 내부에 메모리를 할당하면, 함수 실행이 완료 되거나 범위가 벗어나면 Javascript가 해당 메모리를 자동으로 할당 해제한다.
  • 그렇지만 메모리 누수 문제는 Javascript에도 있기 때문에 주의해서 메모리 관리를 해야한다.

참고: https://dev.to/pranav016/advanced-javascript-series-part-1-behind-the-scenes-javascript-engine-ats-hidden-classes-garbage-collection-3ajj

태그