컴퓨터는 0과 1로 표현하고 이해할 수 있다. 그런데 우리가 코딩을 할 때 0과 1로 코드를 짜지 않는다. 가령
const isCode = true위와 같은 코드를 컴퓨터가 어떻게 이해할까?
자바스크립트 엔진
JS Engine은 자바스크립트 언어를 이해하고 컴퓨터에게 뭘 실행해야 할 지 알려준다.
많은 종류의 JS 엔진이 있다
https://en.wikipedia.org/wiki/List_of_ECMAScript_engines
V8
대표적인 JS엔진으로 V8이 있다. 구글이 만들었으며 c++로 작성되었다. 이전에는 대부분의 브라우저가 쓰는 엔진들은 조금 느렸다. v8이후로 브라우저에서 자바스크립트 처리 속도가 빨라졌는데 크롬과 node.js가 V8엔진을 사용하고 있다.
인터프리터와 컴파일러
JS를 기계어로 번역하는데 2가지 방식이 있다. 인터프리터와 컴파일러이다
인터프리터
프로그램 실행시 한 라인씩 코드를 읽고 번역한다. 코드를 bytecode로 번역한 뒤 실행된다. 인터프리터는 한줄씩 실행되기 때문에 번역속도가 빠르다. 그러나 따로 번역 파일을 실행하지 않아서 실행할 때마다 같은 번역을 진행한다. 예를 들어 아래와 같은 반복문을 보면, 똑같은 함수에 같은 인자를 전달해서 1000번 호출한다고 하면 결과값은 항상 같으나 1000번 모두 호출하므로 실행 속도가 느리다.
const cal = (first, second) => first + second;
for(let i=0; i<1000; i++){
cal(5, 4)
}컴파일러
인터프리터와 달리 코드를 만나면 즉시 번역하지 않고 먼저 프로그램 전체를 스캔하여 모두 기계어로 번역한다.
초기 스캔 시간이 오래걸리지만 전체 실행 시간만 본다면 인터프리터보다 빠르다. 스캔을 마치고 실행파일을 만들어놓으면 이전에 만들어 놓았던 실행파일을 실행하기 때문이다.
Babel is a Javascript compiler that takes your modern JS code and returns browser compatible JS (older JS code).
Typescript is a superset of Javascript that compiles down to Javascript.
Both of these do exactly what compilers do: Take one language and convert into a different one!
JIT 컴파일러
interpreter + compilter => jit complier
JIT 컴파일러는 컴파일러와 인터프리터의 단점을 상호보완하기 위해 등장했다. 실행시점에서는 인터프리터 방식으로 bytecode를 생성하고 V8 엔진은 bytecode를 기계어로 바꾸어 이 코드를 캐싱한다.
V8엔진은 다음과 같이 동작한다
- JS코드를 받는다.
- Parser에게 넘긴다. Parser는 코드를 AST(abstract syntax tree)로 변환한다.
- AST를 인터프리터에게 넘긴다. 인터프리터는 bytecode로 변환한다. bytecode는 기계어만큼 low level은 아니지만 JS엔진에 의해 해석될 수 있다
- 프로파일러 => 코드를 확인하는 역할
어떻게 최적화가 되어야되는지 감시자 역할을 하는 프로파일러는 인터프리터가 작동할 때 프로파일링 한다.만약 똑같은 코드가 몇번 실행되었다면 코드가 돌아갈 때 interpreter는 최적화할 코드를 JIT컴파일러에게 전달한다. - 컴파일러는 app이 돌아갈 때 코드를 받아서 컴파일 하거나 수정한다
즉 위와 같이 JS코드를 실행되면 실행속도는 점점 빨라진다. 프로파일러와 컴파일러가 실행되면서 bytecode를 업데이트하여 효율적으로 바꿔주기 때문이다
