자바스크립트 엔진
- 엔진이란? 쉽게 말해 자바스크립트를 실행시키는 '프로그램' 이다.
- 가장 유명한 엔진은 구글의 V8 엔진이고, 크롬과 node.js를 구동시킨다.
- 각 브라우저별로 고유한 엔진을 가지고 있고, 어떤 엔진이든 자바스크립트 엔진은 콜스택과 메모리 힙을 포함한다.
콜 스택
- 우리의 코드가 실제로 실행되는 영역이고, 이 작업은 콜 스택 내의 실행 컨텍스트에 의해서 이루어진다.
- 또한 원시타입 데이터가 이 영역에 저장된다.
메모리 힙
- 구조화 되지 않은 메모리 풀(memory pool) 로 앱이 실행되기 위해 필요한 참조타입 데이터(객체)가 저장된다.
컴퓨터는 0과 1밖에 모르기 때문에, 우리가 작성한 소스코드가 실제로 실행되기 위해서는 컴퓨터가 알아들을 수 있는 머신 코드로 변환하는 작업이 필요하다. 이 작업에는 크게 두 가지 종류가 있다.
compilation vs interpretaion (컴파일러 vs 인터프리터)
컴파일 방식 (compilation) : 소스코드 ⇒ (컴파일) ⇒ 파일 ⇒ (실행) ⇒ 프로그램 동작
- 컴파일러 방식은 전체 코드가 한번에 머신 코드로 변환된다. 그 뒤 변환된 코드로 어떤 컴퓨터에서든 실행할 수 있는 파일을 생성한다.
- 코드가 실행되는 것은 모든 컴파일이 진행된 다음에 가능하다.
- 이 방식을 사용하는 언어를 컴파일 언어라고 하며, 이렇게 번역(소스코드 to 머신코드)을 실행하는 번역기를 컴파일러 라고 한다.
인터프리터 방식 (interpretation) : 소스코드 ⇒ (변환과 동시에 실행) ⇒ 프로그램 동작
- 소스코드를 한줄 씩 읽어 내려가며 실행시키는 인터프리터가 실행된다.
- 컴파일 방식과 다르게 파일이 생성되는 과정 없이, 한 줄의 코드가 머신코드로 변환되는 동시에 실행된다.
- 인터프리터 언어의 단점은 한 번에 변환된 뒤에 실행되는 컴파일 언어보다 훨씬 느리다는 점이다.
자바스크립트는 인터프리터 언어에 해당한다.
그러나 현대의 자바스크립트 엔진은 인터프리터 언어의 단점을 보완한, 소스코드를 컴파일한 뒤에 실행시키는 JIT(Just-in-Time) 방식을 사용한다.
JIT 방식 (Just-in-Time) : 소스코드 ⇒ (컴파일) ⇒ (실행) ⇒ 프로그램 동작
- 소스코드를 머신코드로 컴파일 한 뒤 실행파일을 생성하지 않고 즉시 코드를 실행한다.
자바스크립트 코드 컴파일 과정
- 파싱: 소스코드를 AST(Abstract Syntax Tree) - 추상 구문 트리 라는 자료구조로 파싱한다. 파싱이 시작되면 라인별로 코드가 분리되고 각 내용이 트리구조로 된 AST에 저장된다. AST는 이후 머신 코드로 변환된다.
- 컴파일: 앞에서 만들어진 AST를 머신 코드로 변환한다.
- 실행 : 머신 코드가 콜 스택에서 곧바로 실행된다.
- 최적화 : 자바스크립트 엔진은 이 과정을 진행하면서 머신 코드를 지속해서 최적화시킨다. 우선 빨리 실행될 수 있도록 최적화되지 않은 버전의 코드를 실행하고, 실행이 계속 되는 동안 머신 코드를 다시 컴파일하여 최적화한다. 이러한 최적화 과정이 있기 때문에 현대의 JS 엔진(V8 등)이 더욱 빠른 성능을 가질 수 있는 것이다.
- 이러한 컴파일링 과정은 우리가 접근할 수 없는 별도의 쓰레드에서 진행된다.
자바스크립트 런타임
- 자바스크립트를 사용하기 위해 필요한 모든 것이 들어있는 컨테이너(환경)
- 대표적 예시로 웹 브라우저와 Node.js가 있다.
런타임 구성 요소(브라우저의 경우)
- 자바스크립트 엔진 : 자바스크립트를 구동하는 핵심 요소, 런타임의 심장!
- web APIs(DOM, Timers, fetch API 등등...) : 자바스크립트 엔진이 사용할 수 있는 기능으로, 엄밀히 말하면 자바스크립트 언어의 일부는 아니다.
- 콜백 큐 : 실행 대기중인 콜백함수가 저장되는 자료구조. 콜백 함수가 실행되면 콜백 큐에서 대기중인 메시지가 콜스택으로 넘어가 실행된다. 이 과정을 이벤트 루프 라고 한다.
참고자료
'JavaScript > JavaScript' 카테고리의 다른 글
[JavaScript] 콜 스택과 메모리 힙 :: 데이터의 저장 방식 (0) | 2022.07.11 |
---|---|
[JavaScript] 실행 컨텍스트와 콜 스택 (0) | 2022.07.11 |
[JavaScript] JSON (0) | 2022.07.09 |
[JavaScript] 객체 Object (0) | 2022.07.08 |
[JavaScript] 배열 메서드 정리 (0) | 2022.07.07 |