[JavaScript] JavaScript Engine - 자바스크립트 엔진의 이해

자바스크립트 엔진은 자바스크립트 코드를 실행하기 위해 필요한 컴퓨터 프로그램입니다. 

자바스크립트 엔진은 각각의 브라우저마다 다르긴 하지만, 모든 엔진이 call stack과 heap을 가지고 있습니다.

 

Call Stack: 코드가 실행되었을 때, 실행 context(Execution context)을 부르기 위해 사용합니다.

Heap: 비구조화된 memory 공간입니다. application에 필요한 모든 객체들이 저장되는 공간입니다. 

 

컴퓨터 프로그램은 기계어로 번역되기 위한 과정이 필요합니다. 

 

Compliation: 전체 코드가 기계어로 번역되기 위해 전체 소스 코드가 한번에 기계어로 변환됩니다. 그런 다음 기계어는 모든 컴퓨터에서 실행할 수 있는 휴대용 파일로 기록됩니다.

이 때 실행은 기계어로 변환된 이후에 실행이 가능합니다

 

Interpretation: Interpreter는 소스 코드를 실행하고 한 줄씩 실행합니다.

 

모던 자바스크립트 엔진은 Compliation과 Interpretation을 섞어놓은 방식을 사용합니다.

전체 코드가 한 번에 기계 코드로 변환 된 후 즉시 실행됩니다.

여기서는 portable file이 필요없고, 즉시 실행 됩니다. 

 

엔진의 작동 방식

1) Parsing

자바스크립트 코드가 엔진에 들어오면 Parsing 과정을 거칩니다. Parsing 과정에서는 Abstract Syntax Tree(AST)라고 불리는 tree 자료 구조 형태에 code를 parsing 합니다. 이 과정은 각 코드의 줄을 의미있는 조각으로 나눕니다.

모든 조각으로 나눈 다음 트리에 저장하고, syntax error 같은 에러를 점검합니다. 

 

2) Compilation

AST 트리를 기계어로 번역합니다.

 

3) Execution

번역된 기계어는 Just in-time compilation 을 통해 바로 실행되고, 실행될 때는 call stack에서 실행됩니다.

 

4) Optimization

Background에서는 코드를 최적화하는 과정을 실행하고 recompile을 프로그램 실행 과정(Running)중에 진행합니다.

최적화되지 않은 코드는 새로운 최적화된 코드로 바꿔주는데 이 과정을 멈춤없이 프로그램 진행중에 실행해줍니다.

 

위 4가지 과정은 엔진안에 특별한 threads 에서 일어나는데, 개발자가 접근하는 것을 막음으로써 main thread와 철저하게 분리합니다. 철저하게 분리함으로써 프로그램을 call stack과 main thread에서 실행할 수 있게 도와줍니다. 

 

자바스크립트 RunTime

 

이벤트 발생 전

브라우저는 JavaScript에 필요한 모든 것을 담고있습니다.

runtime에는 자바스크립트 엔진이 있습니다. 엔진 밖에는 자바스크립트가 전혀 존재하지 않는 부분이 존재하는데,

Web APIs가 있습니다. Web APIs는 DOM, Timers, Fetch API 등이 있습니다. Web APIs는 엔진에게 필요한 기능들을 제공하지만 자바스크립트 언어가 아닙니다. 자바스크립트는 global window object 객체로 인해서 APIs에 접근할 수 있습니다. 

 

다음으로 일반적인 JavaScript 런타임에는 Callback queue(대기열)도 포함됩니다. Callback queue 자료구조는 모든 콜백 함수를 포함하는 데이터 구조입니다. 예를들어 이벤트 핸들러 같은 것은 이벤트가 실행되었을 때 발생합니다. 이러한 이벤트 핸들러 함수들은 callback 함수로 불립니다. 이벤트가 발생하였을 때 callback 함수가 호출이 되고, scenes 뒤에서 실행됩니다. 

 

이벤트 발생 후 

이벤트 후에 실제로 발생하는 첫 번째 일은 callback 함수가 Callback queue에 배치됩니다. 그런 다음 스택이 비어 있으면, 콜백 함수가 스택에 전달되어 실행될 수 있습니다. 

stack이 비어있으면 callback 함수가 stack에 전달되어 실행될 수 있습니다. 이것을 event Loop라고 부르게 되는데, 기본적으로 이벤트 루프는 콜백 대기열에서 콜백 함수를 가져와 호출 스택에 넣고 실행합니다. 

 

이렇게 이루어져있기 때문에, 자바스크립트는 nonblocking인 과정입니다.