프론트엔드 짧은 간단 지식 정리 - 웹 렌더링 과정

이상범·2024년 10월 10일

프론트엔드 짧은 간단 지식 정리

목록 보기

5/21

1. CRP(Critical Rendering Path) 🚀

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰포트(Viewport)에 표시하기까지의 전체 과정을 의미합니다.

🔄 렌더링 7단계 프로세스

HTML 문서 → 파싱 → DOM 트리 → CSSOM 트리 → 렌더 트리 → 레이아웃 → 페인트

1️⃣ 파싱 (Parsing)

브라우저의 렌더링 엔진이 서버로부터 받은 HTML, CSS 파일을 해석하는 과정입니다.

2️⃣ DOM 트리 구축 (DOM Tree Construction)

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 만듭니다.

💡 DOM(Document Object Model)
HTML 요소의 구조화된 표현을 제공하며, 문서 상호작용을 돕는 방법을 제공합니다.

<!-- HTML 코드 예시 -->
<html>
  <body>
    <div>
      <p>Hello World!</p>
    </div>
  </body>
</html>

Document
 └── <html>
      └── <body>
           └── <div>
                └── <p>
                     └── Text: "Hello World!"

3️⃣ CSSOM 트리 구축 (CSSOM Tree Construction)

브라우저의 렌더링 엔진이 <style> 태그를 만나면:

HTML 파싱을 일시 중지 ⏸️
CSS 파싱 작업을 시작
CSSOM 트리 구축

💡 CSSOM(Cascading Style Sheets Object Model)
HTML 요소들과 연관된 스타일 정보의 구조화된 표현을 제공합니다.

4️⃣ 자바스크립트 실행 (JavaScript Execution)

HTML 파싱 중 <script> 태그나 외부 스크립트 참조를 만나면:

DOM 파싱을 중지 🛑
자바스크립트 엔진에게 제어 권한 넘김
스크립트 실행
실행 완료 후 다시 DOM 트리 그리기 재개 ▶️

⚠️ 주의: 이 과정은 DOM 트리 구성 중간에 일어날 수 있습니다!

5️⃣ 렌더 트리 구축 (Render Tree Construction)

DOM 트리 + CSSOM 트리 = 렌더 트리 🌳

렌더 트리는:

웹 페이지에 실제로 표시될 HTML, 스타일 요소로 구성
화면에 보이는 요소만 포함 (display: none인 요소는 제외)

6️⃣ 레이아웃 생성 (Layout)

렌더 트리가 형성되면:

디바이스의 뷰포트 내에서
각 노드의 정확한 위치와 크기를 계산 📐

7️⃣ 페인트 (Paint)

마지막 단계! 렌더링 엔진이 페인트 이벤트를 발생시킵니다:

렌더 트리를 탐색
레이아웃 정보를 바탕으로
노드들을 화면에 표시 🎨

2. 파싱(Parsing) 이란? 📖

🔍 파싱의 정의

컴퓨터 과학에서 특정 형식으로 구성된 데이터를 분석하고 그 의미를 이해하는 과정입니다.

문자열 형태의 입력 데이터를 구문 분석
특정 규칙이나 문법을 적용
데이터 구조(예: 트리 구조)로 변환

🌐 웹 개발에서의 파싱

브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 과정

파싱된 결과는 보통 노드 트리(Node Tree) 형식으로 구성됩니다.
(파싱 트리, 문법 트리 등으로도 불림)

💡 파싱의 종류

🏗️ HTML 파싱

브라우저가 HTML 문서를 받아 DOM 트리를 생성하는 과정

<div>
  <p>Hello</p>
</div>

⬇️ 파싱 후

Document
 └── <html>
      └── <body>
           └── <div>
                └── <p>
                     └── Text: "Hello"

⚡ 자바스크립트 파싱

브라우저가 자바스크립트 코드를 다음으로 변환:

실행 가능한 바이트코드
추상 구문 트리(AST)

자바스크립트 엔진(V8, SpiderMonkey 등)이 이 파싱 과정을 통해 코드를 실행합니다.

⚙️ 파싱 과정의 중요성

파싱이 완료되어야:

✅ 브라우저가 HTML, CSS, JavaScript의 의미를 이해
✅ 이를 기반으로 페이지를 렌더링
✅ 사용자에게 올바른 화면을 표시

3. 추상 구문 트리(AST) 🌲

🎯 AST란?

Abstract Syntax Tree(추상 구문 트리)는 컴퓨터 프로그램의 소스 코드를 구문 분석하여 계층적 트리 구조로 표현한 것입니다.

🤔 왜 AST가 필요한가?

문제	해결
자바스크립트 코드는 사람이 읽기 쉽게 작성됨	컴퓨터가 이해하고 실행하려면 구조 파악 필요
구문적 구조가 명확하지 않음	AST로 계층적 표현 → 엔진이 쉽게 분석
최적화가 어려움	AST 기반으로 다양한 최적화 수행 가능

✨ AST의 특징

1. 계층적 구조 📊

프로그램의 구문적 구조를 계층적으로 표현
루트(root) 노드: 프로그램 전체를 대표
하위에 여러 자식 노드들이 연결

2. 추상화 🎭

세부적인 구문 정보 생략
프로그램의 의미를 표현하는 요소만 포함
예: 중괄호 {} 같은 구문적 요소는 제외 가능

3. 노드의 종류 🏷️

각 노드는 특정한 구문 요소를 나타냅니다:

변수 선언
함수 호출
연산자
기타 문법 규칙에 따른 다양한 노드

🧩 AST의 구성요소

구성요소	설명	예시
Node(노드)	프로그램의 각 구성요소	변수, 연산자, 함수 호출 등
Edge(엣지)	노드들 간의 관계	부모-자식 관계로 연결

💡 AST 예시

자바스크립트 코드

a = b + 1;

AST 표현

AssignmentExpression
 ├── Identifier: a
 └── BinaryExpression
      ├── Identifier: b
      └── Literal: 1

각 요소의 의미:

AssignmentExpression: 할당 표현식 (왼쪽: a, 오른쪽: b + 1)
Identifier: a: 변수 a
BinaryExpression: 이진 표현식
Identifier: b: 변수 b
Literal: 1: 리터럴 값 1

🚀 AST의 활용

AST는 다양한 컴파일러와 인터프리터에서 핵심 역할을 합니다:

활용 분야	설명
구문 분석	소스 코드를 구문적으로 분석하여 구조화
코드 변환	소스 코드를 다른 형식으로 변환하거나 최적화
코드 분석	프로그램의 구조와 동작을 이해하고 분석
코드 생성	새로운 소스 코드나 바이트코드를 생성

⚡ 최적화 예시

AST를 기반으로 자바스크립트 엔진이 수행하는 최적화:

불필요한 코드 제거 (Dead Code Elimination)
루프 전개 (Loop Unrolling)
인라인 함수 (Function Inlining)
상수 접기 (Constant Folding)

4. 마무리 🎉

🌟 핵심 정리

개념	설명
CRP	브라우저가 HTML을 화면에 렌더링하는 전체 과정 (7단계)
파싱	코드를 브라우저가 이해할 수 있는 구조로 변환
DOM/CSSOM	HTML과 CSS의 구조화된 표현
AST	자바스크립트 코드의 계층적 트리 구조
렌더 트리	화면에 표시될 요소들의 최종 트리

이상범

프론트엔드 입문 개발자입니다.

이전 포스트

프론트엔드 짧은 간단 지식 정리 - 고차함수와 일급객체

다음 포스트

프론트엔드 짧은 간단 지식 정리 - 웹 렌더링 과정