-
자바스크립트 엔진(JavaScript Engine)프론트엔드/프론트엔드 이론 2020. 9. 18. 05:18
자바스크립트 엔진이란?
자바스크립트엔진이란 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 이야기한다.
이때 자바스크립트 엔진은 코드를 표준적인 인터프리터로 구현할 수도 있고 JIT 컴파일( 매번 모든 코드를 해석하는 것이 아니라 자주 쓰는 코드는 미리 저장해뒀다가 나중에 프로그램 실행 시 사용 )로도 구현이 가능하다.
V8같은 경우는 엔진 내에서 컴파일, 인터프리터 방식 두 가지를 모두 지원한다.
자바스크립트 엔진들
자바 스크립트를 언어를 해석하는 자바스크립트 엔진은 굉장히 다양한 종류가 있는데, 대체로 브라우저에 탑재되기 때문에 브라우저 제작사마다 각자의 자바 스크립트 엔진을 쓰는 경우가 많다.
1. V8: 오픈 소스로 구글이 개발. 구글 크롬과 안드로이드와 Node.js에서도 사용된다.
2. 스파이더몽키: 최초의 자바스크립트 엔진. 넷스케이프가 개발했고, 현재는 모질라 파이어폭스에서 쓰인다.
3. 차크라(자바스크립트): 마이크로 소프트 엣지에서 아요됨
솔직히 이렇게 많은 스크립트 엔진이 있지만, 현재 전세계에선 안드로이드와 크롬 덕에 V8이 많이 쓰인다.
자바스크립트 엔진의 코드 해석 순서
아래 예시는 V8의 예시다.
하지만 일반적으로 엔진마다 다소 차이는 있지만 대략 이런 흐름으로 진행된다고 생각하면 된다.
1. HTML 파서가 HTML 소스에서 <Script> 태그를 만난다.
브라우저는 스크립트 엔진, 렌더링 엔진 등 다양한 엔진을 가지고 있고 실행은 항상 동시에 일어나지 않을 수 있다.
왜냐면 자바스크립트 없이 HTML만 코드를 짤 수도 있기 때문이다.
HTML 파서가 <Script> 태그를 만나면 그 안의 내용을 분석하기 시작한다.
2. 자바스크립트 소스 코드가 파싱된다.
<Script> 태그 이후 사용자가 작성한 소스 코드의 어휘와 문법을 분석하는 작업을 한다.
왜냐면 소스 코드 안에는 자연어도 들어있고 주석도 들어있고 그런 것들을 분류해야 한다.
파싱된 자료를 통해 노드를 만들어낸다.
3. 파싱된 자료를 이용해 AST(Abstract Syntax Tree)를 생성한다.
파싱의 결과물로 나온 노드들을 모아서 추상 구문 트리 즉 AST를 만든다.
AST에서 각 노드는 소스 코드에서 발생되는 구조를 나타낸다.
참고로 AST는 컴파일러에서 많이 쓰인다. 이는 코드 구조를 표현하는 프로퍼티이기 때문이다.
AST는 일반적으로 컴파일러의 구문 분석 단계의 결과물이다.
4. AST를 인터프리터를 통해 바이트 코드로 바꾼다.
AST의 노드들은 인터프리터를 통해 가상 머신이 이해하기 쉽게 만든 중간 코드인 'Bytecode'로 변환된다.
즉 AST는 처음에는 인터프리터를 통해 한줄 한줄 해석해서 바이트 코드를 만들게 된다.
5. 자주 쓰는 구문을 최적화를 위해 컴파일한다.
인터프리터를 통해 해석된 바이트 코드 중 자주 쓰는 구문은 터보팬이라 이름 붙은 최적화를 맡은 컴파일러에 전달된다.
터보팬은 호출 빈도가 많은 구문을 컴파일해서 'Optimized Machine Code' 라는 최적화된 코드로 만든다.
이때 히든클래스, 인라인 캐싱 같은 다양한 기법을 사용하게 된다.
6. '바이트코드'와 '최적화코드'
앞서 V8은 AST를 통해 기본적으로 인터프리터 방식으로 '바이트코드'를 만들었다.
그리고 그 중 자주쓰는 구문은 최적화 컴파일러를 통해 '최적화코드'를 만들었다.
그리고 이제 이 둘이 번갈아가면서 기존에 '바이트코드'를 CPU에 전달하다가 자주쓰는 구문의 구간이 오면 미리 준비해둔 '최적화코드'를 CPU로 전달하게 되는 것이다.
그리고 이 둘은 당연히 기계어로 번역되어 전달된다.
내용이 긴데 요약하면 다음과 같다.
파싱 → AST 구성 → 인터프리터로 '바이트코드' 생성 → 자주쓰는 구문은 최적화 컴파일러로 전달하여 '최적화 코드'를 생성→ 둘을 번갈아가면 사용
'프론트엔드 > 프론트엔드 이론' 카테고리의 다른 글
Object 정리 - window, 객체, object, DOM (0) 2020.09.20 자바스크립트엔진의 런타임(runtime) (0) 2020.09.18 렌더 트리 (Render Tree) (0) 2020.09.18 CSSOM(CSS Object Model) (0) 2020.09.18 DOM(Document Object Model) (0) 2020.09.18