댓글 검색 목록

[javascript] ?⚙️ 자바 스크립트 엔진 심층 분석-(Chrome V8)

페이지 정보

작성자 운영자 작성일 20-09-11 10:33 조회 646 댓글 0

웹 브라우저는 인터넷 세계의 주요 부분입니다.

주소창에 URL을 입력 할 때마다 원격 서버에서 리소스를 가져 와서 화면에 표시하는데, 이번에는 주로 3 가지 과정을 거칩니다.

Fetch
Process
Display

처음에는 인터넷을 통해 후속 웹 서버에서 데이터를 가져옵니다.

Alt Text

그런 다음 렌더 엔진이 수신 된 리소스를 처리합니다. 그 후 브라우저 엔진이 데이터 표시를 수행합니다.

Alt Text

어떻게 이 모든 일이 ...?

이러한 프로세스에 대해 더 잘 알기 위해서는 브라우저가 JavaScript를 처리하는 방법을 알아야 합니다. 그리고 그것은 JavaScript 엔진에 의해 수행됩니다.

JavaScript 엔진은 JavaScript 코드를 실행하는 프로그램 또는 인터프리터입니다.

JS는 더 높은 수준의 동적 언어이며 기계의 낮은 수준의 로직과 직접 상호 작용할 수 없습니다.

따라서 JavaScript 엔진은 표준 인터프리터 또는 JavaScript를 어떤 형식의 바이트 코드로 컴파일하는 Just-In-Time 컴파일러로 구현할 수 있습니다. 아래 이미지에서 js 엔진의 높은 수준의 개요를 참조하십시오.

Alt Text

1. Parser Html 파서는 <script> 태그를 통해 로드 된 모든 스크립트를 가져옵니다. 이 스크립트의 소스 코드는 바이트 스트림 디코더에 UTF-16 바이트 스트림으로로드됩니다. 이 바이트 스트림 디코더는 바이트를 토큰으로 디코딩 한 다음 파서로 보냅니다.

2. AST(Abstract Syntax Tree)

파서는 받은 토큰을 기반으로 노드를 만듭니다. 이러한 노드를 사용하여 AST (추상 구문 트리)를 만듭니다.

3. Interpreter

인터프리터는 AST를 살펴보고 바이트 코드를 생성합니다. 코드를 한 줄씩 읽습니다. 바이트 코드가 생성되면 메모리 공간을 정리하기 위해 AST가 삭제됩니다.

4. Profiler

프로파일러는 코드를 모니터링하고 감시하여 최적화 합니다.

5. Compiler

컴파일러는 미리 작업하고 작성된 코드의 번역을 생성하고 기계가 읽을 수 있는 낮은 수준의 언어로 컴파일합니다.

우리는 js 엔진의 다른 구성 요소를 보았습니다. 이제 사용 가능한 다양한 JavaScript 엔진이 무엇인지 확인해 보겠습니다.

V8 — Google에서 개발하고 C ++로 작성된 오픈 소스
Rhino — Mozilla Foundation, 오픈 소스에서 관리하며 전적으로 Java로 개발 됨
Spider Monkey — 예전에는 Netscape Navigator를 지원했으며 현재는 Firefox를 지원하는 최초의 JavaScript 엔진
JavaScriptCore — 오픈 소스, Nitro로 판매되고 Safari 용으로 Apple에서 개발
KJS — KDE 프로젝트의 Konqueror 웹 브라우저를 위해 Harri Porten이 원래 개발 한 KDE 엔진
Chakra (JScript9) — Internet Explorer
Chakra Core(JavaScript) — Microsoft Edge (Now uses v8)
Nashorn, Oracle Java Languages and Tool Group에서 작성한 OpenJDK의 일부인 오픈 소스
JerryScript — 사물 인터넷을 위한 경량 엔진입니다.

Google에서 만든 V8 Engine은 오픈 소스이며 C ++로 작성되었습니다. 이 엔진은 Google 크롬 내에서 사용됩니다. V8은 인기 있는 Node.js 및 Deno에도 사용됩니다. 고성능을 얻기 위해 V8은 인터프리터를 사용하는 대신 JavaScript 코드를 보다 효율적인 기계어 코드로 변환합니다. 대부분의 최신 JavaScript 엔진은 동일한 접근 방식을 가지고 있지만 V8은 중간 코드를 생성하지 않는다는 점이 두드러집니다.

V8의 작동 원리

V8은 JIT (Just-In-Time) 컴파일러를 구현하여 실행시 JavaScript 코드를 기계어 코드로 컴파일합니다. JIT 컴파일러는 기존 컴파일러와 인터프리터의 이점을 모두 취하여 함께 혼합합니다.

v8 overview

V8이 자바 스크립트 코드를 컴파일 할 때 파서는 AST (추상 구문 트리)를 생성합니다. 구문 트리는 JavaScript 코드의 구문 구조를 트리로 표현한 것입니다. 인터프리터 인 Ignition은이 구문 트리에서 바이트 코드를 생성합니다. 최적화 컴파일러 인 TurboFan은 결국 바이트 코드를 가져와 최적화 된 기계 코드를 생성합니다.

성능 Ignition 인터프리터와 컴파일러 Turbofan 뒤에있는 v8의 2 가지 주요 파이프 라인을 조금 더 확인해 보겠습니다.

Ignition

v8의 인터프리터는 Ignition이라고 합니다. 인터프리터는 바이트 코드를 생성합니다. 한 번만 실행하면되는 코드에 유용합니다. 바이트 코드는 JavaScript 엔진 자체 내에서 실행됩니다. 해석 된 코드는 무언가를 실행하기 위해 거짓이지만 약간 느립니다. Ignition은 세 가지 목표를 달성하여 오버 헤드 메모리 소비를 해결합니다.

메모리 사용량 감소
시작 시간 단축
복잡성 감소

TurboFan

TurboFan 파이프 라인은 바이트 코드를 기계 코드로 변환하는 몇 가지 단계를 따릅니다. 파이프 라인의 최적화는 Ignition에서 수집 한 피드백을 기반으로 수행됩니다.

TurboFan의 온라인, JIT 스타일 컴파일 및 최적화는 소스 코드에서 기계 코드로의 V8 번역을 마무리합니다.

때때로 우리는 반복되는 코드 블록을 가질 수 있습니다. JavaScript 컴파일러는 피드백을 실행하고 실행 중인 코드에 대한 프로파일 링 데이터를 수집합니다. 매번 동일한 유형의 매개 변수로 호출되고 여러 번 호출 된 함수를 발견하면 이 코드는 TurboFan을 통과합니다. TurboFan은 핫 코드를 위해 CPU에서 직접 실행되는 고도로 최적화 된 기계 수준 코드를 생성합니다. TurboFan은 JS 엔진이 코드가 뜨겁다는 것을 감지 할 때만 작동합니다. 코드는 매우 자주 실행되거나 루프 내에서 실행되는 경우 뜨겁습니다. 컴파일 된 코드에는 직접 CPU 명령이 있으며 훨씬 빠릅니다.