JavaScript가 실행되기 까지

gclee·2024년 5월 23일
post-thumbnail

JavaScript가 엔진을 통해 실행되는 과정

JavaScript 코드를 작성하고 이를 웹 브라우저나 Node.js를 사용하여 실행하게 되면, JavaScript 엔진이 이를 해석하고 실행합니다.

JavaScript 엔진 소개

JavaScript 엔진은 JavaScript 코드를 실행하는 프로그램 또는 인터프리터입니다. 대표적인 JavaScript 엔진으로는 다음과 같은 것들이 있습니다.

  • V8: Google이 개발한 엔진으로, Google Chrome과 Node.js에서 사용됩니다.
  • SpiderMonkey: Mozilla가 개발한 엔진으로, Mozilla Firefox에서 사용됩니다.
  • JavaScriptCore: Apple이 개발한 엔진으로, Safari에서 사용됩니다.
  • Chakra: Microsoft가 개발한 엔진으로, 구버전의 Microsoft Edge에서 사용됩니다.

현대의 JavaScript 엔진은 Just-In-Time (JIT) 컴파일을 사용하여 JavaScript 코드 실행을 최적화하며, 인터프리터와 컴파일러의 장점을 결합한 하이브리드 방식으로 동작합니다.

JavaScript 실행 과정

1단계: 코드 작성

개발자는 텍스트 에디터나 통합 개발 환경(IDE)을 사용하여 JavaScript 코드를 작성합니다.

function greet() {
    console.log('Hello, world!');
}

greet();

2단계: 코드 로딩

작성된 JavaScript 코드는 웹 브라우저나 서버 환경(Node.js)으로 로드됩니다. 웹 브라우저에서는 HTML 파일에 스크립트를 포함시켜 로드합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 예제</title>
    <script src="script.js" defer></script>
</head>
<body>
</body>
</html>

3단계: 파싱

JavaScript 엔진이 코드를 받으면 첫 번째로 하는 작업은 파싱입니다. 엔진은 코드를 읽고 추상 구문 트리(Abstract Syntax Tree, AST)로 변환합니다. 이 단계에서 코드의 문법을 확인합니다.

function greet() {
    console.log('Hello, world!');
}

greet();

4단계: 컴파일

현대의 JavaScript 엔진은 JIT 컴파일을 사용합니다. 이는 두 가지 단계로 나뉩니다

  1. 바이트코드 생성: AST를 중간 표현인 바이트코드로 변환합니다.
  2. JIT 컴파일: 자주 실행되는 코드(핫 코드)를 기계어로 컴파일하여 실행 성능을 높입니다.
AST -> 바이트코드 -> 기계어

5단계: 실행

JavaScript 엔진의 인터프리터가 바이트코드를 실행합니다. 자주 실행되는 코드는 JIT 컴파일러에 의해 기계어로 컴파일되어 더욱 효율적으로 실행됩니다.

바이트코드/기계어 -> 실행

6단계: 메모리 관리

JavaScript 엔진에는 메모리 할당 및 해제를 관리하는 가비지 컬렉터가 있습니다. 가비지 컬렉터는 더 이상 사용되지 않는 메모리를 자동으로 해제하여 메모리 누수를 방지합니다.

가비지 컬렉터 -> 사용되지 않는 메모리 해제

V8 엔진을 사용하는 예시

파싱

V8 엔진은 JavaScript 코드를 파싱하여 AST를 생성합니다.

바이트코드 생성

V8 엔진의 인터프리터인 Ignition이 AST를 바이트코드로 변환합니다.

JIT 컴파일

V8 엔진의 최적화 컴파일러인 TurboFan이 핫 코드를 기계어로 컴파일합니다.

실행 및 최적화

실행 중 V8 엔진은 성능을 최적화하기 위해 핫 코드 경로를 재컴파일하고, 가비지 컬렉터를 통해 메모리를 효율적으로 관리합니다.

0개의 댓글