자바스크립트가 어떻게 브라우저에서 실행되는지에 대해 단계별로 쉽게 설명하겠습니다.
자바스크립트는 브라우저의 자바스크립트 엔진에서 처리되며, 이 과정에서 여러 중요한 단계가 이루어집니다.
이번에는 JavaScript 엔진이 자바스크립트 코드를 어떻게 처리하고 실행하는지 살펴볼게요. 😊
1. 자바스크립트 파일이 브라우저의 자바스크립트 엔진에 전달된다 🚀
웹 페이지에 포함된 자바스크립트 파일이 브라우저로 로드되면, 브라우저는 이 파일을 자바스크립트 엔진에 전달합니다.
자바스크립트 엔진은 브라우저 내부에서 자바스크립트 코드를 처리하는 중요한 구성 요소로, 크롬과 같은 브라우저에서는 V8 엔진이 사용됩니다.
이 단계에서는 자바스크립트 코드를 엔진에게 넘겨주는 첫 번째 단계입니다. 💻
2. 토크나이징(Tokenizing) 과정에서 코드가 토큰으로 분해된다 🧩
자바스크립트 엔진은 전달받은 자바스크립트 파일을 읽고, 이를 토크나이징(Tokenizing) 합니다.
토크나이징은 자바스크립트 코드에서 의미 있는 작은 조각들(토큰)을 추출하는 과정입니다.
-
예를 들어, 코드
let x = 5;는 다음과 같은 토큰으로 분해됩니다:1) let – VariableDeclaration: 변수 선언을 나타내는 키워드
2) x – Identifier: 변수 이름을 나타내는 식별자
3) = – AssignmentOperator: 값을 할당하는 연산자
4) 5 – NumericLiteral: 숫자 리터럴
5) ; – Punctuator: 구문 종료를 나타내는 세미콜론
이때 토크나이저(Tokenizing)는 각 부분을 단순히 문자열로만 인식하는 것이 아니라, 각 부분의 역할에 따라 토큰의 타입을 부여합니다.
이 정보는 이후 파싱 및 실행 단계에서 자바스크립트 엔진이 코드의 구조를 분석하고 실행하는 데 중요한 역할을 합니다.
이 과정은 자바스크립트 엔진이 코드를 분석할 수 있도록 하는 첫 단계로, 코드에서 각 단어와 기호가 어떤 의미를 가지는지 명확히 하는 작업입니다.
3. 파서(Parser)가 토큰을 기반으로 AST(Abstract Syntax Tree)를 생성한다 🌳
토크나이징이 완료되면, 파서(Parser)가 이 토큰들을 기반으로 AST(Abstract Syntax Tree), 즉 추상 구문 트리를 만듭니다. AST는 코드의 구조를 나무처럼 표현한 자료구조로, 각 노드는 코드의 특정 부분을 의미합니다.
-
예를 들어,
let x = 5;라는 코드는 AST에서let이라는 선언 노드,x라는 변수 노드,5라는 값 노드로 구성된 트리가 됩니다.이 AST는 자바스크립트 코드가 어떻게 실행되어야 하는지 엔진이 이해할 수 있도록 도와주는 중요한 단계입니다. 🚧
4. 인터프리터(Ignition)가 AST를 기반으로 바이트코드를 생성하고, 실행한다 🚀
AST가 만들어지면, 인터프리터(크롬의 경우 Ignition)가 이 AST를 바탕으로 바이트코드를 생성합니다.
바이트코드는 기계어보다는 더 높은 수준의 중간 단계 코드로, 자바스크립트 엔진이 이 바이트코드를 실행하여 자바스크립트의 동작을 처리합니다.
-
이 바이트코드는 프로그램이 실행될 때 실제로 수행되는 작업을 설명합니다. 예를 들어, 변수에 값을 할당하거나, 함수를 호출하는 동작들이 바이트코드로 번역됩니다.
이 과정에서 자바스크립트 코드는 즉시 실행되며, 빠르게 처리됩니다. ⚙️
5. JIT 컴파일러(TurboFan)가 성능을 최적화하기 위해 기계어로 변환한다 💡
인터프리터가 자바스크립트를 실행하는 동안, JIT(Just-In-Time) 컴파일러인 TurboFan은 자주 실행되거나 반복적인 코드를 감지합니다. 이때 JIT 컴파일러는 해당 코드를 최적화하여 기계어로 컴파일합니다.
-
기계어는 CPU가 직접 실행할 수 있는 코드로, JIT 컴파일러는 성능을 높이기 위해 복잡하거나 자주 반복되는 코드를 기계어로 변환합니다.
이렇게 변환된 기계어 코드는 메모리에 저장되어 나중에 재사용되며, 이후에 같은 코드가 실행될 때는 더 빠르게 처리됩니다.이 최적화 과정 덕분에 자바스크립트는 동적으로 해석되지만, 성능이 크게 향상될 수 있습니다. 🚀
자바스크립트 실행 프로세스 정리 ✨
- 자바스크립트 파일이 브라우저의 자바스크립트 엔진(V8 등)에 전달됩니다.
- 자바스크립트 엔진은 이 파일을 토크나이징하여 의미 있는 토큰들로 분해합니다.
- 파서(Parser)가 토큰을 기반으로 AST(Abstract Syntax Tree)를 생성합니다.
- 인터프리터(Ignition)는 AST를 기반으로 바이트코드를 생성하고, 이를 실행합니다.
- 반복적이거나 복잡한 코드가 감지되면, JIT 컴파일러(TurboFan)가 해당 코드를 기계어로 컴파일하여 성능을 최적화합니다. 이렇게 변환된 코드는 메모리에 저장되어 나중에 재사용됩니다.
이렇게 브라우저 내에서 자바스크립트가 효율적으로 처리되고 실행되는 과정을 살펴보았어요. 브라우저의 자바스크립트 엔진은 여러 단계를 통해 동적인 웹 페이지 기능을 빠르게 제공할 수 있게 만들어줍니다! 🌟
