브라우저 동작 원리(1) 자바스크립트 엔진, V8 엔진이란

자바스크립트 엔진?

• javascript로 작성된 코드를 해석하고 실행하는 인터프리터(프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경)

• js엔진은 브라우저 벤더별로 다양하다. Mozilla의 Monkey시리즈, 자바의 바이트코드로 컴파일해주는 라이노(Rhino), 구글 크롬의 V8, Safari의 JavascriptCore, Explorer의 차크라(Chakra) 등이 있음

V8 엔진이란?

구글이 개발한 자바스크립트 엔진 (Open Source)

• C++로 제작

• 자바스크립트의 수행 속도 개선을 목표로 처음 고안됨

• 클라이언트 쪽(구글 크롬)과 서버 쪽(node.js 런타임)에서 사용

• 인터프리터를 이용하는 대신 JavaScript 코드를 좀 더 효율적인 기계어 코드로 번역

쓰레드를 사용

• 메인 쓰레드 
  코드를 가져와서 컴파일하고 실행하는 곳

• 컴파일을 위한 별도의 쓰레드 
  별도의 쓰레드가 코드를 최적화하는 동안 메인 쓰레드는 쉬지 않고 코드를 수행할 수 있음

• 프로파일러 쓰레드 
  어떤 메소드에서 사용자가 많은 시간을 보내는지 런타임에게 알려주어 크랭크샤프트(최적화 컴파일러로서 고도로 최적화된 코드를 생산함)가 이들을 최적화할 수 있게 해줌

• 그 외 가비지컬렉터 스윕을 처리하기 위한 몇 개의 쓰레드가 있음

최적화 방법

인라이닝

미리 많은 코드를 인라이닝 함으로서 호출 지점(함수가 호출된 곳의 코드위치)을 호출된 함수의 내용으로 바꾸는 과정

히든클래스

• 다른 JavaScript Engine이 프로퍼티를 저장하기 위해서 사전식 데이터 구조를 이용하지만, V8은 hidden class를 이용한다. 이 둘의 차이는 단순하게 이야기해서 Hashing과 Pointer의 차이라고 할 수 있다.

• 기존에는 자바스크립트의 속성을 가져올 때 메모리상에서 객체 속성 위치를 찾아내는 비효율적인 방식을 사용

• V8은 객체에 새로운 프로퍼티를 추가할 때 hidden class를 생성하고, hidden class에 프로퍼티의 정적인 위치(offset)를 저장함으로써 실제 데이터가 저장되어 이는 위치에 대한 Pointer를 제공한다. 이로 인해 런타임에 데이터접근이 필요 없어지고, 고전적인 클래스 기반의 최적화를 할 수 있다. (위치 정보 해석할 필요가 없어져서 빨라진다)

인라인 캐싱

• 같은 메소드에 대한 반복되는 호출은 같은 타입의 객체에 이루어진다는 결과로 진행

• 객체 필드에 접근을 할 때 hidden class를 사용한다면 결국 우리가 얻고 싶은 것은 접근하려는 필드의 오프셋 값입니다. 간단히 말하면 인라인 캐싱은 이 오프셋 값을 캐싱하겠다는 이야기

• V8이 메소드에 전달될 객체 타입에 대한 가정을 잘 할 수 있으면 객체의 속성에 접근할 방법을 알아내는 과정을 수행하지 않아도 되며 그 대신 객체의 히든 클래스에 대해 이전에 찾아서 저장했던 정보를 사용할 수 있음

Reference

자바스크립트는 어떻게 작동하는가: V8 엔진의 내부 + 최적화된 코드를 작성을 위한 다섯 가지 팁 : https://engineering.huiseoul.com/자바스크립트는-어떻게-작동하는가-v8-엔진의-내부-최적화된-코드를-작성을-위한-다섯-가지-팁-6c6f9832c1d9 
V8 javascript 엔진 : https://sjh836.tistory.com/92