짹뚜 스튜디오

자바스크립트 엔진 본문

개발 공부/javascript

자바스크립트 엔진

짹뚜 2021. 12. 30. 21:24

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열한 번째인 Javascript Engine 항목을 공부하면서 간단하게 작성한 글이다.

 

자바스크립트 엔진은 자바스크립트 코드를 Bytecode로 변환하고 실행해주는 프로그램이다. 브라우저마다 사용하는 자바스크립트 엔진의 동작방법은 자세히 보면 다르지만 비슷한 개념을 가지고 있기 때문에 어떤 식으로 자바스크립트 코드가 실행이 되는지 간단하게 알아보려고 한다.

Parsing

일단 자바스크립트 엔진이 자바스크립트 코드를 input으로 받아서 제일 먼저 해주는 것이 Parsing이다.  Parsing 이란 자바스크립트 코드를 토큰으로 만든다음에 Abstract Syntax Tree (AST)로 변환한다.

 

https://astexplorer.net/

위 이미지는 변수 선언과 할당을 AST 형식을 바꾼 것이다. 

JIT Compiler

자바스크립트 엔진은 JIT Compiler (Just In Time Compiler)를 사용해서 Parsing 단계에서 생성된 AST를 이용해서 bytecode를 생성하고 실행한다. JIT Compiler는 인터프리터처럼 프로그램 실행과 동시에 한 줄씩 bytecode로 변환하면서 실행하지만 그와 동시에 프로그램에서 반복적으로 사용되는 부분을 최적화된 bytecode로 컴파일을 하게 된다. 이렇게 되면 인터프리터의 속도와 컴파일러의 효율성을 모두 장점으로 가지게 된다.

 

정리하자면 자바스크립트 엔진이 동작하는 순서는 다음과 같다.

 

  1. 자바스크립트 코드가 입력으로 들어온다. (JS 파일)
  2. 코드를 토큰으로 parsing 한다.
  3. parisng된 토큰으로 AST를 만든다.
  4. Interpreter가 AST를 bytecode로 변환한다.
  5. 변환된 bytecode가 실행된다.
  6. 만약 같은 bytecode가 반복적으로 실행이 된다면 해당 bytecode와 profiling data가 Compiler로 보내진다.
  7. Compiler에서는 받은 bytecode와 profiling data로 최적화된 bytecode를 만든다.
  8. 다음에 해당 bytecode가 실행될 때는 최적화된 bytecode로 실행된다.

'개발 공부 > javascript' 카테고리의 다른 글

[Javascript] Short-circuiting (단축평가)  (0) 2022.01.09
[Javascript] arguments  (0) 2022.01.09
setTimeout, setInterval and requestAnimationFrame  (0) 2021.12.28
Event Loop (이벤트 루프)  (0) 2021.12.24
모듈  (0) 2021.12.22
Comments