Google V8 엔진, Javascript의 동작원리 알짜만 빼먹기

Google V8 엔진, Javascript의 동작원리 알짜만 빼먹기

 

이번 포스팅에서는 Chrome 등의 브라우저에서 사용되는 V8 엔진과

Javascript의 동작원리에 대해서 알아보려고 합니다.

Javascript 개발자로서 꼭 알아야되는 것은 아니지만, 알면 좋은...

여기까지 알아야 하나 하면서도 알면 좋은(?!) 내용이니 가볍게 훑어 보도록 합시다.

 

V8 이 뭔데?

V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진입니다. 

C++로 작성되어 있으며, 자바스크립트코드를 바이트코드(bytecode)로 컴파일 하고 실행하는 방식을 사용합니다.

2016년 이전에는 FullCode generator, Crankshaft, TurboFan 이라는 컴파일링 기법이 사용되었고, 

이 후 Ignition 인터프리터가 추가되었습니다.

2017년부터는 FullCode generator와 Crankshaft을 사용하지 않고,

Ignition과 TurboFran으로 컴파일러 파이프라인이 구성되었습니다.

 

컴파일러의 구성이 이렇게 변경된 이유는 기존 Complie 방식이 메모리, 속도, 복잡성의 문제를 안고 있었고, 

사용 리소스가 PC 보다는 제한된 스마트폰의 사용량이 늘어나면서 이를 보완하기 위함입니다.

점차 Compile 언어에서 Interpreting 언어로 변환되었습니다.

 

 

V8 이 어떻게 동작하는데?

우리가 브라우저에 특정 사이트의 주소를 입력되면 DNS 서버를 통해 접속 가능한 IP 정보를 얻게되고 

그 IP 주소로 HTTP Request를 보내서 받은 HTTP Response를 브라우저에 전달합니다.

HTTP Response의 DOM, CSS를 Chrome의 Renderer가 Parsing하고

DOM Tree와 CSSOM Tree를 생성합니다. (Display를 위한)

그러다가 <script> 태그를 만나면 AST(Abstract Syntax Tree) 를 생성해 위에서 설명한 Ignition Interpreter로 전달합니다.

Ignition은 인터프리팅 방식으로 AST를 bytecode로 변경합니다.

변경된 bytecode를 TurboFan 이 최적화 코드로 생성합니다.

 

Link : Javascript code to AST 변환 참고 사이트

AST explorer

 

Javascript 동작 원리

Javascript 의 동작 구성요소로는 Call Stack, Web APIs, Callback Queue, Event Loop, Heap로 구성됩니다.

Call Stack 은 Single Thread 로 동작하며 실제 Javascript 코드의 실행을 담당합니다. LIFO 정책을 따릅니다.

Web APIs 는 Timeout Function과 ajax, Event Listener와 같이 비동기적 호출의 코드를

특정시간동안 대기시키는 공간입니다.  

Callback Queue는 Web APIs에서 대기가 끝난 실행코드가 Call Stack으로 가기 전, 실행 순서에 맞게 쌓이는 공간입니다.

Event Loop는 Call Stack과 Callback Queue를 계속적으로 모니터링 하면서 Call Stack이 비어있을 경우에만 Callback Queue의 실행코드를 Call Stack으로 전달하는 역할을 합니다.

Heap은 참조형 변수가 인스턴스화되어 저장되는 공간입니다. 

 

 

예시 코드를 보도록 하죠.

 

console.log("A");
setTimeout(() => {console.log("B")}, 1000);
console.log("C");

 

위의 코드가 실행되면 console.log("A") 가 Call Stack으로 들어가게 되고 console에 "A"가 출력되면서 

Call Stack에서는 지워지게 됩니다.

그리고 setTimeout을 만나면서 내부 화살표 함수는 Web APIs로 들어가게되고 1초동안 대기하게 됩니다.

다음 console.log("C");가 Call Stack에 들어가 "C"가 출력이 되고 지워지게 됩니다.

1초 후 Web APIs에 있던 화살표 함수는 Callback Queue로 이동되고, 

Event Loop가 확인 후 Call Stack이 비어있다면 화살표함수를 Call Stack으로 이동합니다.

"C"가 출력되면서 Call Stack에서도 지워지게 됩니다.

 

 

Google의 V8 엔진과 Javascript의 동작원리에 대해서 훑어보는 시간을 갖었습니다.

개발을 하는데 크게 도움이 되는 내용은 아니지만, Javascript 개발자로서 내가 짠 코드가 실행되는 브라우저와 코드가 어떻게 동작하는지 기본적인 흐름은 알고갔으면 하는 바람입니다.

감사합니다.