1. CRP(Critical Rendering Path)
- CRP란, 웹 브라우저가 원본 HTML문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰포트(Viewport)에 표시하기까지의 과정을 의미한다.
- 파싱: 브라우저의 렌더링 엔진은 서버로부터 받은 HTML, CSS파일을 해석하는 파싱 과정을 거친다.
- DOM 트리 구축: 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여, DOM 트리를 만든다.
- DOM(Document Object Model) : HTML 요소의 구조화된 표현을 제공하며, 문서 상호작용을 돕는 방법 제공
- CSSOM 트리 구축: 브라우저의 렌더링 엔진은
<style>태그를 만나게 되면, HTML 파싱을 멈추고 CSS파싱 작업을 시작하여 CSSOM 트리를 구축한다.- CSSOM(Cascading Style Sheets Object Model) : HTML 요소들과 연관된 스타일 정보의 구조화된 표현 제공
- 자바스크립트 실행
- 이 과정은 DOM 트리를 구성하는 과정 사이에 일어날 수도 있다.
- 만약, HTML 파싱 중 자바스크립트를 의미하는
<script>태그나 외부 스크립트 참조 구문을 만나게 되면, DOM 파싱을 중지하고 자바스크립트 엔진에게 제어 권한을 넘겨 스크립트를 실행한다. - 그리고, 스크립트 실행이 끝나면 다시 DOM 트리를 그리기 시작한다.
- 렌더 트리(Render Tree) 구축: DOM트리와 CSSOM 트리를 결합해 렌더 트리를 형성한다.
- 렌더 트리는 웹 페이지에 표시될 HTML, 스타일 요소로 구성되는 트리이다.
- 브라우저는 렌더 트리를 생성하기 위해 DOM, CSSOM 두 개의 트리를 필요로 한다.
- 레이아웃 생성: 렌더 트리가 형성되면, 디바이스의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 레이아웃 단계를 거친다.
- 페인트(Paint)
- 마지막으로, 렌더링 엔진은 페인트 이벤트를 발생시킨다.
- 해당 단계에서는, 렌더 트리를 탐색하며 레이아웃 단계를 거쳐 알아낸 구성 노드 정보를 이용해, 노드들을 화면에 표시한다.
2. 파싱(Parsing)
- 파싱(Parsing)이란, 컴퓨터 과학 및 프로그래밍에서 특정 형식으로 구성된 데이터를 분석하고 그 의미를 이해하는 과정을 의미한다.
- 주로 문자열 형태의 입력 데이터를 구문 분석하여 특정 규칙이나 문법을 적용해 데이터 구조(예: 트리 구조)로 변환하는 작업을 의미한다.
- 웹 개발에서의 파싱(Parsing) 은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 식으로 이해할 수 있다.
- 파싱된 결과는 보통 노드 트리(Node Tree) 형식으로 구성된다. (이는 파싱 트리, 문법 트리 등으로 불린다.)
※ HTML 파싱
- 브라우저가 HTML 문서를 받아들여 이를 파싱하여 DOM(Document Object Model) 트리를 생성하는 과정이다.
- DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 HTML 요소를 노드로 나타낸다.
- 예를 들어,
<div><p>Hello</p></div>형태의 HTML코드는 아래와 같은 DOM 트리로 변환된다.
- 예를 들어,
└── <html>
└── <body>
└── <div>
└── <p>
└── Text: "Hello"
※ 자바스크립트 파싱
- 자바스크립트 파싱은, 브라우저가 자바스크립트 코드를 받아들여 이를 파싱하여 실행 가능한 바이트코드 또는 추상 구문 트리(Abstract Syntax Tree, AST)로 변환하는 과정이다.
- 자바스크립트 엔진(예: V8, SpiderMonkey 등)은 이 파싱 과정을 통해 자바스크립트 코드를 실행한다.
- 이러한 변환 과정은, 자바스크립트 엔진이 소스 코드를 효율적으로 실행하기 위해서 필요하다.
※ 파싱 과정의 중요성
- 파싱 과정은 웹 페이지가 브라우저에 의해 올바르게 렌더링되기 위해 필수적이다.
- 파싱이 완료되어야 브라우저가 HTML, CSS, 자바스크립트의 의미를 이해하고, 이를 기반으로 페이지를 렌더링할 수 있기 때문이다.
3. 추상 구문 트리(AST)
- 추상 구문 트리란, 컴퓨터 프로그램의 소스 코드를 구문 분석(parsing)하여 계층적 트리 구조로 표현한 것을 의미한다.
- 자바스크립트 소스 코드는 사람이 읽기 쉽게 작성되지만, 컴퓨터가 이를 이해하고 실행하려면 그 구조를 명확히 파악해야 한다.
- AST는 코드의 구문적 구조를 계층적으로 표현하여, 자바스크립트 엔진이 이를 쉽게 분석하고 이해할 수 있도록 한다.
- 또한, AST로 변환된 코드는 최적화 과정을 거칠 수 있다. 자바스크립트 엔진은 AST를 기반으로 다양한 최적화를 수행하여, 실행 속도를 향상시킬 수 있다.
- 예를 들어, 불필요한 코드 제거, 루프 전개, 인라인 함수 등의 최적화를 통해 코드 실행이 더 효율적으로 이루어질 수 있다.
AST의 특징
- 계층적 구조
- 프로그램의 구문적 구조를 계층적으로 나타낸다.
- 루트(root) 노드는 프로그램 전체를 대표하며, 그 하위에 여러 자식 노드들이 계층적으로 연결된다.
- 추상화
- 세부적인 구문 정보를 생략하고, 프로그램의 의미를 표현하는 데 필요한 요소들만 포함한다.
- 예를 들어, 중괄호와 같은 구문적 요소는 포함되지 않을 수 있다.
- 노드의 종류
- 각 노드는 특정한 구문 요소를 나타내며, 노드의 종류는 프로그래밍 언어와 관련된 문법 규칙에 따라 다르다.
- 예를 들어, 변수 선언, 함수 호출, 연산자 등 다양한 종류의 노드가 있을 수 있다.
AST의 구성요소
- Node
- 프로그램의 각 구성요소를 나타낸다.
- 예를 들어, 변수, 연산자, 함수 호출 등이 노드가 된다.
- Edge
- Node(노드)들 간의 관계를 나타내며, 부모-자식 관계로 연결된다.
예시
- 여기 간단한 자바스크립트 코드가 있다.
a = b + 1;- 이 코드가 AST로 표현되면, 아래와 같다.
- AssignmentExpression: 할당 표현식, 왼쪽에 변수
a, 오른쪽에b + 1이 있다. - Identifier: a: 변수
a를 나타낸다. - BinaryExpression: 이진 표현식, 왼쪽에
b, 오른쪽에1이 있다. - Identifier: b: 변수
b - Literal: 1: 리터럴 값
1
- AssignmentExpression: 할당 표현식, 왼쪽에 변수
AssignmentExpression
├── Identifier: a
└── BinaryExpression
├── Identifier: b
└── Literal: 1
활용
- AST는 다양한 컴파일러와 인터프리터에서 중요한 역할을 한다:
1. 구문 분석: 소스 코드를 구문적으로 분석하여 구조화한다.
2. 코드 변환: 소스 코드를 다른 형식으로 변환하거나 최적화할 때 사용한다.
3. 코드 분석: 프로그램의 구조와 동작을 이해하고 분석한다.
4. 코드 생성: 새로운 소스 코드나 바이트코드를 생성한다.
- AST는 코드의 의미를 이해하고 변환하는 데 중요한 도구로, 프로그램의 구문적 구조를 명확히 하고 다양한 언어 처리 작업을 지원한다.
프론트엔드 입문 개발자입니다.