JavaScript Engine

김정환·2020년 12월 29일
0
post-thumbnail

JavaScript Engine

WebPage 기본 요소

  • HTML : 웹페이지 컨텐츠 제공 (구조)
  • CSS : HTML 구성요소들의 디자인 (표현)
  • JavaScript : 웹페이지와 사용자 사이 상호작용 (동작)

특징

JavaScript Engine은 프로그램이나 자바 스크립트 코드를 실행하는 프로그램 또는 인터프리터.

  • JavaScript는 상속과 클래스라는 개념은 없습니다.
  • JavaScript는 인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행됩니다.
  • JavaScript는 HTML문서 내에 기술되고 HTML 문서와 함께 수행됩니다.
  • JavaScript는 HTML에 연산 제어 등 프로그래밍적인 요소를 추가하고 클라이언트의 자원을 활용할 수 있게 합니다.
  • JavaScript는 단일 콜스택을 사용합니다.
    . . .

5.9버전 이전까지는 V8 엔진은 바이트코드로 변환하지 않고 조금 더 최적화된 기계 친화적 언어로 번역했고, 다른 언어들은 컴파일러를 통해 바이트 코드로 변역을 거치고 인터프리터를 거쳐서 머신코드로 만들어집니다.
이후 파이프라인 개념이 도입되어 최근에는 안에 있는 인터프리터와 최적화 컴파일러로 자바스크립트 코드를 번역하고 통역합니다.
엔진 실행과정을 보면 JIT 컴파일 형식이라 스크립트언어 또는 인터프리터언어 하나로 단정짓기는 무리가 있다고 합니다.
링크텍스트

종류

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

V8 Engine

구성

  • Memory Heap : 메모리 할당이 발생하는 곳
  • Call Stack : 코드가 실행될 때 스택 프레임이 있는 곳

AST

자바스크립트 컴파일러 내부 매커니즘 AST
소스 코드 구조를 표시하는 계층적 프로그램 표현
코드의 프로그램을 나타내는 노드 트리

 function addFive(num) {
  return num + 5;
}

위 예제코드에서 컴파일러가 다음의 AST를 추출

{
  type: "Program",
  start: 0,
  end: 44,
  body: [{
    type: "FunctionDeclaration",
    start: 1,
    end: 44,
    id: {
      type: "Identifier",
      start: 10,
      end: 17,
      name: "addFive"
    },
    expression: false,
    generator: false,
    async: false,
    params: [{
    ...
    }],
    body: {
      ...
    }
  }],
  sourceType: "module"
}

https://astexplorer.net/

JavaScript runtime

JavaScript Event Loop 영상

JavaScript Engine의 최적화

Node.js에서

태스크 큐와 이벤트 루프

이벤트 루프는 현재 콜스택이 비어있을 때마다, 태스크큐에서 콜백함수를 가져와 실행시킨다.

이벤트 루프는 ECMAScript 스펙에 없다. 자바스크립트 엔진이 아니라 이 엔진을 돌리는 환경(브라우저 or Node.js)에서 실행시키는 것 이기 때문이다.

이벤트루프나 태스크큐 등 동시성에 관한 처리(비동기)는 자바스크립트엔진을 구동하는 환경인 브라우저 혹은 Node.js에서 한다. 이 환경들은 다중스레드를 활용해 자바스크립트 콜백들을 태스크큐에 던지고, 이벤트 루프를 통해 V8엔진의 콜스택에서 실행될 수 있게 한다.

0개의 댓글