Javascript Visualized: Javascript Engine

■ Javascript Engine

HTML 파서는 source(src)가 있는 script 태그를 만나게 된다.

이 때, source의 코드는 네트워크, 캐시, 서비스 워커 등을 통해 로드된다.

날아오는 응답은 요청된 script가 바이트 스트림으로 변환된 형태.

바이트 스트림이 다운되면서, 바이트 스트림 디코더가 이를 디코딩(해석)한다.

바이트 스트림 디코더는 해석된 바이트 스트림으로부터 토큰을 생성한다.

 

자바스크립트 엔진은 두 개의 파서를 사용한다. parser와 pre-parser.

parser는 지금 바로 사용되는 코드를, pre-parser는 나중에 필요한 코드를 각각 다룸으로써

지금 당장 사용되지 않는 코드를 파싱하는 것을 최대한 피하기 위함.

(버튼을 클릭했을 때 동작하는 함수같은 것들은, 페이지를 로드할 때 당장 필요한 건 아니니까.

이런 코드는 유저가 실제로 버튼을 클릭했을 때, 즉 실제로 필요할 때가 돼서야 파서로 보내진다.)

 

파서는 바이트 스트림 디코더로부터 받은 토큰들을 기반으로 노드를 만들어 추상구문트리(AST)를 생성한다.

그러고나면 인터프리터가 AST를 훑으면서, 거기에 담긴 정보들을 바탕으로 기계가 해석할 수 있는 바이트 코드를 생성.

바이트 코드가 생성되고나면 AST는 메모리에서 삭제된다.

 

이제, 바이트 코드가 실행되면서 생성된 정보(어떤 동작이 특히 자주 발생하는지, 어떤 데이터가 사용되는지 등),

즉 '타입 피드백'을 이용해서 최적화 컴파일러가 고도로 최적화된 기계어를 만들어낸다.

반복적인 작업은 최적화된 기계어를 통해 수행하다가,

이전과 다른 동작이 수행되면 엔진은 다시 바이트 코드를 해석하러 돌아감.

(바이트 코드 다시 수행하고나면 '타입 피드백'을 업데이트)

🚀⚙️ JavaScript Visualized: the JavaScript Engine