멀티 크리에이터 NoHack의 개발 로그

자바스크립트 엔진 동작 과정 🔥

HTML 파서는 문서를 위에서부터 아래로 읽으며 필요한 리소스를 확인합니다. 그러는 중간에 자바스크립트 코드를 불러오는 script 태그를 발견하면, 제어권을 자바스크립트 엔진에게 넘기면서 클라이언트는 서버로 요청을 시작하고, 서버는 이에 따라 파일을 메모리에 적재 후 바이트 스트림(Byte Stream)을 통해 전달합니다.

 

자바스크립트 엔진은 바이트 스트림으로 넘어온 스크립트 파일을 디코더를 통해 해석합니다.

 

바이트 스크림 디코더는 바이트 값을 해석하면서, 그 자체만으로 최소한의 문법적 의미를 갖는 토큰을 생성합니다.

 

자바스크립트 엔진은 pre-parser와 parser 두 개의 파서를 사용합니다. 왜냐하면 웹 사이트의 로딩 속도를 높이기 위해 당장은 불필요한 코드를 분석할 필요는 없기 때문입니다. 그래서 각 파서는 당장 필요한 코드와 나중에 필요할 코드를 나눠서 분석합니다.

 

파서는 전 단계에서 토큰화한 토큰을 기반으로 추상 구문 트리인 AST를 생성합니다. 🌳

 

추상 구문 트리(AST): 프로그래밍 언어 문법에 따라 코드 구조를 계층적으로 표시하는 표현입니다.

 

그 다음으로는 자바스크립트 엔진에 포함된 인터프리터가 AST에 포함된 정보를 기반으로 바이트 코드를 생성합니다. 바이트 코드를 생성하게 되면 메모리에 담겨 있던 AST는 제거되며, 바이트 코드를 통해 자바스크립트를 실행할 수 있습니다.

 

이렇게 생성된 바이트 코드는 그 자체만으로도 실행이 빠를 수 있지만, 반복적으로 수행된다면 자바스크립트 엔진은 최적화 컴파일러를 통해 좀 더 기계에 최적화된 기계어를 생성합니다. 

 

 

참고 📖

JavaScript Visualized: the JavaScript Engine