티스토리 뷰

자바스크립트가 실행되는 단계별 과정을 컴파일과 파싱의 흐름으로 표현

 

 우리가 브라우저에 작성하는 자바스크립트는 어떻게 실행될까요? 코드 한 줄이 실제 동작으로 바뀌는 그 과정은 생각보다 복잡하며, 그 중심에는 Google의 V8 엔진이 있습니다.

 

 이 글에서는 V8이 자바스크립트를 처리하는 전체 흐름을 파싱 → 컴파일 → 실행까지 단계별로 설명하고, 성능 향상을 위한 JIT 컴파일과 최적화 전략도 함께 다룹니다.

파싱(Parsing) – 코드를 읽는 첫 단계

 자바스크립트는 사람이 읽을 수 있는 언어입니다. 하지만 컴퓨터는 이 텍스트를 바로 실행할 수 없습니다.

 V8 엔진은 먼저 파서(Parser)를 이용해 자바스크립트 코드를 한 줄씩 읽으며 구조를 분석합니다.

 이 단계에서 자바스크립트는 아래와 같은 내부 구조로 바뀝니다:

  1. 토큰화(Tokenizing)
    • 코드 문장을 키워드, 연산자, 변수명 등 작은 단위(토큰)로 나눕니다.
    • 예) let x = 5;let, x, =, 5, ;
  2. AST(Abstract Syntax Tree) 생성
    • 토큰을 계층 구조로 구성하여, 코드의 문법적 의미를 시각화한 트리 형태로 변환합니다.
    • 이 AST는 자바스크립트의 실행 기반이 됩니다.

 즉, 파싱은 자바스크립트 코드가 실제로 실행되기 전, “이 코드가 어떤 뜻인지 이해하는 과정”이라고 볼 수 있습니다.

컴파일 – 실행 가능한 코드로 변환

 과거 자바스크립트는 인터프리터 방식(한 줄씩 해석하며 실행)으로 처리되었지만, V8은 JIT(Just-In-Time) 컴파일이라는 최신 방식을 사용합니다. 이 방식은 코드 실행 직전에 코드를 기계어로 바꿔 더 빠르게 실행할 수 있게 해 줍니다.

 V8은 다음 두 가지 컴파일러를 이용합니다:

  1. Ignition (인터프리터)
    - 먼저 AST를 바이트코드(Bytecode)로 변환합니다.
    - 이는 간단한 명령어들의 집합으로, CPU에서 실행되기 전 준비 단계라고 할 수 있습니다.
  2. Turbofan (최적화 컴파일러)
    - 실행 중 성능이 중요한 함수나 루프를 감지하면, 바이트코드를 더욱 빠른 기계어(Native Code)로 변환합니다.
    - 실행 횟수가 많은 코드, 반복되는 구조 등을 집중적으로 최적화합니다.

 이런 JIT 기반 방식 덕분에 V8은 자바스크립트를 매우 빠르게 실행할 수 있으며, 사용자가 느끼는 지연을 최소화합니다.

실행과 최적화 – 똑똑한 실행 전략

 코드가 컴파일되었다면 이제 실행 단계입니다. 이때 V8은 단순히 코드를 실행하는 것에 그치지 않고, 실행 중에도 최적화 작업을 지속합니다.

 V8은 다음과 같은 방식으로 성능을 개선합니다:

  • Inline Caching (인라인 캐싱): 객체의 속성 접근 방식을 캐싱하여 반복 접근 시 빠르게 처리합니다.
  • Hidden Classes (숨은 클래스): 객체의 구조를 추론해 고정된 형식처럼 다루고, 기계어 수준의 최적화를 합니다.
  • Deoptimization (역최적화): 너무 자주 바뀌는 구조나 예외가 많을 경우, 최적화를 되돌려 안정성을 확보합니다.

 예를 들어 반복문 안에서 객체 속성이 계속 바뀌면 V8은 해당 코드를 다시 분석하고, 적절히 최적화하거나 역최적화를 수행해 성능 저하를 방지합니다.

 또한 V8은 가비지 컬렉터(GC)를 통해 사용하지 않는 메모리를 정리하고, 실행 중인 코드가 시스템 리소스를 과도하게 쓰지 않도록 균형을 맞춥니다.

 V8은 단순히 자바스크립트를 실행하는 엔진이 아닙니다. 파싱, 컴파일, 최적화, 실행, 메모리 관리까지 모든 과정을 정밀하게 제어하는 고성능 런타임입니다.

 특히 JIT 컴파일과 내부 캐시 전략 덕분에 현대적인 웹 애플리케이션의 빠른 반응성과 퍼포먼스를 구현할 수 있게 되었습니다.

 

 자바스크립트를 깊이 이해하고 싶다면, 그 작동 배경인 V8의 흐름을 이해하는 것이 큰 도움이 됩니다.

 “코드가 실행된다”는 말 뒤에는, 이렇게 복잡하고 정교한 과정이 숨어 있다는 점을 기억해 주세요.

반응형
반응형
공지사항
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more