javascript 엔진이란?
JavaScript 엔진은 JavaScript 코드를 실제로 해석하고 실행해주는 프로그램입니다.
- Javascript는 사람이 이해하기 쉬운 고수준 언어
- 컴퓨터가 직접 이해하려면 저수준의 명령어로 바꿔야함 -> 이 작업을 JS 엔진이 수행
- 브라우저마다 다른 JS 엔진을 탑재
주요 Javascript 엔진 비교
1. V8
- 사용환경: Chrome, Edge, Node.js
- 제작사: Google
- 특징: 가장 빠른 성능, JIT 컴파일, Node.js
2. SpiderMonkey
- 사용환경: Firefox
- 제작사: Mozilla
- 특징: JS 최소 엔진, 지속적인 최적화
3. JavascriptCore
- 사용환경: Safari
- 제작사: Apple
- 특징: Nitro 엔진 기반, Apple 생태계 최적화
4. Chakra
- 사용환경: 구 Microsoft Edge
- 제작사: Microsoft
- 특징: 현재는 폐기, 과거 IE/Edge에서 사용
가장 많이 사용되는 V8, 브라우저 어디에서 작동하는가
브라우저 구조(Chrome)
┌────────────────────────────┐
│ 사용자 인터페이스(UI) │ ← 주소창, 북마크, 탭 등
├────────────────────────────┤
│ 브라우저 엔진 (Controller) │ ← 각 컴포넌트 조정
├────────────────────────────┤
│ 렌더링 엔진 (Blink) │ ← HTML, CSS 파싱 + 화면에 그림
│ ├── HTML 파서 │
│ ├── CSS 파서 │
│ └── 📍JavaScript 엔진 (V8) │ ← JS 실행 담당
├────────────────────────────┤
│ 네트워크 (요청/응답) │
├────────────────────────────┤
│ 저장소 (쿠키, 로컬스토리지 등) │
└────────────────────────────┘
V8은 Blink 렌더링 엔진 내부에서 작동하는 부품, JavsScript 코드가 <script> 태그나 이벤트 등으로 실행되면 Blink 그 코드를 V8에게 넘겨서 처리하기 됨
실행 순서
예시
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Hi!')">클릭</button>
<script>
console.log('Hello, browser!');
</script>
</body>
</html>- HTML 파싱 시작
-> 렌더링 엔진(Blink)이 HTML을 파싱해 DOM(Document Object Model) 생성
- <script> 태그 발견
-> Blink는 JS 코드를 V8에게 전달함.
- V8이 코드 실행
-> console.log() 명령을 실행하고, 콘솔에 출력
-> 메모리에 이벤트 핸들러 (onclick)도 등록해둠
- 사용자가 버튼 클릭
-> 렌더링 엔진이 이베늩 발생 감지 -> V8에게 전달
-> V8이 alert('Hi!') 실행
V8의 구체적인 실행과정
- JavaScript 코드 작성
- Parsing -> AST 생성
- AST(Abstract Syntax Tree): JS Code의 구조를 트리형태로 나타낸 구조
- 인터프리터(ignition) 실행 -> ByteCode 생성
- Ignition: AST를 해석하고 최적화하는 인터프리터
- ByteCode: 소스코드를 컴파일한 중간코드, 가상머신에서 실행되는 이진 표현법
- JIT 컴파일러(TurboFan) 최적화 -> 네이티브 머신 코드 변환
- JIT(Just-In-TIme) 컴파일러는 프로그램을 실행하는 시점에 기계어로 번역하는 컴파일 기법
C나 C++에서 하는 것처럼 프로그램을 실행하기 전에 처음 한 번 컴파일하는 대신, 프로그램을 실행하는 시점에서 필요한 부분을 즉석으로 컴파일하는 방식
- Garbage Collection: 사용되지 않는 메모리 회수
- 실행
'IT > Javascript' 카테고리의 다른 글
| JS 디버깅 도구 console.log() (0) | 2025.04.05 |
|---|---|
| JS 기초 문법 (0) | 2025.04.05 |
| Axios 버전 문제로 인한 FormData 인식 실패: 해결 방법 (0) | 2024.04.12 |