728x90

V8 엔진을 설명하기 앞서서

💡 브라우저 전쟁에서 크롬이 익스플로러보다 성능이 압도적으로 좋아서 크롬이 승리를 했는데 여러 요인중 있지만, 그중 하나의 요인으로 뽑을 수 있는 게 v8엔진이라고 하는 자바스크립트 엔진이다.

이때 엔진이란?

프로그래밍 언어는 사람이 프로글밍 언어의 문법에 맞게 사용하면 그 문법을 컴퓨터가 해석해서 동작한다. (일종의 문법적 규약)
실제로 프로그래밍 언어를 해석해서 전달하기 위해서는 엔진이란 것이 필요하다.(컴퓨터는 0과 1밖에 이해를 못 하기 때문) 즉 프로그래밍 언어를 해석해서 전달하는 역할 = 엔진

→ 위 엔진의 정의에 의하면 자바스크립트 엔진은 자바스크립트 언어를 기계어로 변환해서 실행하는 프로그램 또는 인터프리터를 의미

ex) 인터넷익스플로어 - 차크라, 파이어폭스 - 스파이더 몽키, 크롬 - V8

여담으로 성능비교는 벤치마크 툴을 통해서 숫자로 뽑아내 정량적으로 비교하는 게 원칙이지만, 이때 V8엔진의 성능이 다른 자바스크립트 엔진보다 월등하게 좋아서 눈으로 비교가 될 정도로 성능이 압도적이었다(이 정도면 외계인 몇 명을 갈아 넣었다는 게 학계의 정설이다)

※ 참고 ※
컴파일러 vs 인터프리터

둘다 프로그램 번역 방식이나, 동작의 차이가 존재한다.

컴파일러

-프로그램 전체를 스캔하고 이를 기계어로 변환

- 이로 인해 초기 스캔시간이 다소 오래 걸림

- 그러나 한번 스캔 이후 다음 실행할 때 이전에 만들어 놓았던 실행파일을 실행하기 때문에 전체 실행 시간은 인터프리티 원어보다 빠름

인터프리터

- 프로그램 실행 시 한 문장 씩 번역-

- 한 문장씩 번역하기 때문에 컴파일러보다 실행시간이 걸림

- 목적코드도 없고, 링킹 과정도 거치지 않았기 때문에 메모리 효율이 좋음

간단한 비교

💡 컴파일 언어는 코드에 문제가 생기면 코드 자체가 돌아가지 않는데 인터프리티 언어는 일단 동작하다가 문제가 생겼을 때 그때 에러를 출력한다

ex) 컴파일 언어(자바 예시)

public class Main {
    public static void main(String[] args) {
        System.out.println("hello");
        System.out.printlnf("heelo2"); // 문법 오류 
    }

}

문법의 오류가 있기 때문에 실행조차 되지 않는다.

ex) 인터프리터 언어(파이썬 예시)

print("hello")
printf("hello2") # 문법 오류

위 빨간색 글자처럼 맨 위 hello는 출력되는 것을 알 수 있다.

V8엔진 & 자바스크립트 엔진의 구성요소

💡 V8엔진 = 크롬 브라우저에서 사용되는 자바스크립트 엔진 자바스크립트코드를 직접 기계어로 변환하는 Just-In-Time(JIT) 컴파일 방식을 사용한다.

V8엔진을 사용하는 이유

JIT 컴파일러를 통해 코드를 빠르게 기계어로 변환시켜 프로그램 속도가 빠르다.
필요한 메모리를 효율적으로 할당하고 관리한다.
오픈소스 프로젝트로 더 많은 기술 혁신을 이끌어 낼 수 있다.

JIT(Just-In-Time) 인터프리팅 → 프로파일링 → 컴파일링 3단계로 이루어져 있다.
1. 인터프리팅
- 한 줄씩 실행하면서 코드를 바이트 코드로 변환
1. 프로파일링
- 실행 중인 코드를 분석 → 자주 실행되는 부분(핫 스폿), 데이터 타입 등 추적을 통해 정보 최적화 때 중요하게 사용
1. 컴파일링
- 프로파일러에 읳 핫 스폿으로 식별된 코드는 JIT 컴파일러에 의해 기계어로 컴파일됨. 자주 실행되는 부분이기에 다시 필요할 때 빠르게 쓰일 수 있도록 캐시에 저장
스크립트의 실행 시간 동안 필요한 부분만을 선택적으로 빠르게 기계어로 변환하여 처리하는 것 JIT 동작 방식

💡 JavaScript Engine 구성요소 자바스크립트 엔진의 구성요소로는 Memory Heap과 Call Stack이 존재한다.

Memory Heap : 변수와 함수의 메모리 할당이 이루어지는 곳

Call Stack : 코드가 실행될 때, 실행 콘텍스트가 쌓이는 곳, 함수를 호출하면 Call Stack에 실행 컨텍스트가 push 함수가 끝나면 Pop되는 형식

※ 실행 컨텍스트 : 현재 실행되고 있는 코드에 대한 정보

JavaScript 동작원리(비동기식 처리)

💡 자바스크립트는 기본적으로 하나의 Call Stack을 가지고 코드를 순차적으로 처리하는 단일 스레드이며 동기식 언어이다.

이러한 자바스크립트를 비동기식으로 처리하기 위해 이벤드 루프, 콜백 큐, 등이 사용된다.

이벤트 큐 : Call Stack이 비어있을 때, 메시지 큐에서 다음 메시지를 콜 스택으로 전송하고 실행

콜백 큐 : 이벤트 핸들러 또는 비동기 API의 콜백 함수들이 대기하는 곳

browser web API : 브라우저에서 비동기 처리를 위해 제공해 주는 함수들

예시로 딥다이브 발표 3개를 한다고 쳐보자

function deepdive1() {
    console.log("딥다이브 1번 발표");
}

function deepdive2() {
    console.log("딥다이브 2번 발표");
}

deepdive1();
setTimeout(function () {
    console.log("딥다이브 3번 발표");
}, 2000);

deepdive2();

위 코드를 실행해 보면

딥 다이브 1번 발표 딥 다이브 3번 발표 딥 다이브 2번 발표

이렇게 실행될 거라고 생각이 들지만 실제로 이렇게 출력이 되지 않는다.

출력결과