JavaScript 자바스크립트 엔진이 코드를 실행하는 과정

* 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다.

---

본 글에서 다룰 내용

• 자바스크립트 엔진이 코드를 실행하는 과정

---

자바스크립트를 실행하기 위해선 자바스크립트 엔진이 필요하고, 웹 브라우저는 자바스크립트 엔진을 내장하고 있습니다.

브라우저마다 엔진의 종류가 다르지만 코드를 실행하는 방식은 비슷하기 때문에 보통 어떻게 실행하는지 알아두는 것이 좋습니다.

 

대표 엔진들

• 크롬 - V8 (오픈 소스, 구글이 개발)
• 사파리 - 웹킷 (오픈 소스, 애플이 개발)
• 스파이더몽키 - 파이어폭스 (최초의 자바스크립트 엔진)
• 차크라 - 마이크로스프트 엣지

자바스크립트 엔진 이미지

 

자바스크립트 엔진이 코드를 실행하는 과정

• 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree)로 변환한다.
• 인터프리터(Interpreter)는 AST를 기반으로 바이트코드(Bytecode)를 생성한다.
• 인터프리터가 바이트코드를 실행할 때, 자주 사용되는 함수 및 타입 정보 등이 있는 프로파일링 데이터(Profiling data)와 같이 최적화 컴파일러(Optimizing compiler)에게 보낸다.
• 최적화 컴파일러는 프로파일링 데이터를 기반으로 최적화된 코드(Optimized code)를 생성한다.
• 하지만, 프로파일링 데이터 중에 잘못된 부분이 있다면 최적화 해제(Deoptimize)를 하고 다시 바이트코드를 실행해서 이전 동작을 반복한다.

인터프리터란?

• 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다.
• 원시 코드를 기계어로 번역하는 컴파일러와 대비된다.

바이트코드란?

• 특정 하드웨어가 아닌 가상 컴퓨터에서 돌아가는 실행 프로그램을 위한 이진 표현법.
• 하드웨어가 아닌 소프트웨어에 의해 처리되기 때문에, 보통 기계어보다 더 추상적이다.

---

참고 문헌 및 사이트

 

이미지 출처 - https://mathiasbynens.be/notes/shapes-ics

Must-Know-About-Frontend Github - https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/engine.md

자바스크립트 엔진 위키백과 - https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%97%94%EC%A7%84

인터프리터 위키백과 - https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0

바이트코드 위키백과 - https://ko.wikipedia.org/wiki/%EB%B0%94%EC%9D%B4%ED%8A%B8%EC%BD%94%EB%93%9C

 

긴 글 읽어주셔서 감사합니다😀