🖥️ 브라우저 렌더링 과정 (CRP) : 웹페이지가 눈앞에 나타나기까지의 마법

(Critical Rendering Path, 핵심 렌더링 경로 완벽 이해)

웹 브라우저에 주소를 입력하고 엔터를 누르는 순간, 보이지 않는 곳에서는 복잡하고 치밀한 과정이 순식간에 일어납니다. 이 과정을 렌더링이라고 하며, 웹페이지를 화면에 표시하는 데 필요한 일련의 단계를 핵심 렌더링 경로(CRP)라고 합니다. 이 과정을 알면 웹사이트의 로딩 속도를 획기적으로 개선할 수 있습니다.

🚀 CRP의 5단계 요약: 웹페이지를 그리는 순서

브라우저가 HTML 문서를 받아 화면에 최종적으로 표시하기까지는 크게 5가지 단계를 거칩니다.

DOM 트리 구축 (HTML 처리)
CSSOM 트리 구축 (CSS 처리)
렌더 트리 구축 (DOM + CSSOM 결합)
레이아웃 (Layout/Reflow)
페인팅 (Painting)

1️⃣ DOM 트리 구축 (Document Object Model)

브라우저가 서버로부터 HTML 데이터를 받으면, 가장 먼저 이 텍스트 파일을 이해할 수 있는 객체 모델로 변환합니다.

입력: HTML 텍스트 파일
과정:
- 바이트 → 문자: HTML 텍스트를 인코딩에 따라 개별 문자로 변환합니다.
- 문자 → 토큰: <와 >로 구분된 의미 있는 덩어리(태그)인 토큰으로 변환합니다.
- 토큰 → 노드: 토큰들을 객체로 만들어 노드를 생성합니다.
- 노드 → DOM 트리: 노드들을 HTML 태그의 계층 구조에 따라 부모-자식 관계로 연결하여 DOM 트리를 완성합니다.
특징:
- DOM 트리는 페이지의 콘텐츠와 구조를 나타냅니다.
- HTML은 렌더링을 차단하지 않습니다. 즉, HTML 파싱(분석)은 <script> 태그를 만나기 전까지는 멈추지 않고 계속 진행됩니다.

2️⃣ CSSOM 트리 구축 (CSS Object Model)

DOM이 콘텐츠의 구조라면, CSSOM은 콘텐츠를 어떻게 꾸밀지에 대한 정보를 담고 있습니다.

입력: CSS 파일, <style> 블록, 인라인 스타일
과정:
- 브라우저는 CSS 파일도 HTML과 마찬가지로 파싱 과정을 거쳐 CSSOM 트리를 구축합니다.
- CSS는 계단식(Cascading) 속성을 가지고 있습니다. 즉, 하위 요소는 부모 요소의 스타일을 상속받으므로, CSSOM 트리는 부모 노드의 스타일을 바탕으로 하위 노드까지 최종 스타일을 결정합니다.
특징:
- CSS는 기본적으로 렌더링을 차단합니다. ❌
- 브라우저는 CSSOM 트리 구축이 완료될 때까지 다음 단계로 넘어가지 않습니다. 불완전한 스타일로 콘텐츠를 보여주는 것을 막기 위함입니다. (FOUC, Flash Of Unstyled Content 방지)

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

DOM과 CSSOM이 준비되면, 브라우저는 이 두 트리를 합쳐서 화면에 보여줄 최종 구조를 만듭니다. 이것이 렌더 트리입니다.

과정:
- DOM 트리의 최상위 노드부터 탐색합니다.
- DOM 노드에 해당하는 CSSOM 스타일을 찾아 적용합니다.
- “화면에 보이지 않는 노드”는 렌더 트리에서 제외됩니다. 🚫
  - 예: <head> 태그, display: none; 속성이 적용된 요소
결과: 렌더 트리는 페이지에 나타날 요소들의 시각적 정보(모양, 크기, 위치 등)를 모두 포함합니다.

4️⃣ 레이아웃 (Layout / Reflow)

렌더 트리가 완성되면, 브라우저는 이제 각 요소의 정확한 위치와 크기를 계산합니다.

과정:
- 뷰포트 내에서 각 노드(요소)의 정확한 픽셀 위치, 너비, 높이 등을 계산합니다.
- 이 과정은 전체 문서를 고려하여 한 번에 이루어집니다. 예를 들어, 부모 요소의 너비가 변경되면 자식 요소들 전체의 위치와 크기가 모두 다시 계산되어야 합니다.
용어:
- 레이아웃 (Layout): 최초에 모든 위치와 크기를 계산하는 것.
- 리플로우 (Reflow): 스크립트 실행 등으로 인해 렌더 트리의 일부가 변경되어 재계산이 일어나는 것. 리플로우는 성능 저하의 주범이 될 수 있습니다.

5️⃣ 페인팅 (Painting / Rasterization)

레이아웃 단계에서 계산된 위치와 크기 정보를 바탕으로, 브라우저는 픽셀을 화면에 실제로 채우기 시작합니다.

과정:
- 요소의 배경색, 글꼴, 이미지, 테두리 등 모든 시각적 속성을 픽셀로 변환하여 화면에 그립니다.
성능 최적화:
- 현대 브라우저는 효율성을 위해 이 과정을 레이어(Layer) 단위로 분리하여 처리합니다.
- 각 레이어는 GPU(그래픽 처리 장치)를 사용하여 병렬적으로 처리될 수 있으며, 이를 래스터화(Rasterization)라고 합니다.

🖼️ 합성 (Compositing)

페인팅이 완료된 여러 레이어를 최종적으로 하나로 합쳐서 화면에 표시합니다. 스크롤이나 애니메이션처럼 위치만 변경되는 작업은 레이아웃이나 페인팅을 다시 하지 않고, 이 합성 단계에서 레이어의 위치만 옮겨서 처리하기 때문에 성능이 좋습니다.

💡 성능 최적화의 핵심 (CRP를 줄여라!)

CRP를 이해하면 “왜 내 사이트는 느릴까?”에 대한 답을 찾을 수 있습니다. 최종 렌더링까지 걸리는 시간을 줄이는 것이 목표입니다.

최적화 대상	원인	해결책
CSSOM	CSS는 렌더링 차단 ❌	CSS를 가능한 한 빨리 다운로드하고 파싱합니다. `<link>` 태그를 `<head>`의 상단에 배치합니다.
자바스크립트 (JS)	DOM/CSSOM 구축을 차단 🛑	`<script>` 태그에 `async` 또는 `defer` 속성을 사용하여 스크립트 다운로드 및 실행이 파싱을 차단하지 않도록 합니다.
레이아웃	불필요한 리플로우 발생	CSS 속성 중 위치(Top, Left) 대신 `transform` 속성을 사용하면 레이아웃이나 페인팅 없이 합성 단계에서만 처리되어 빠릅니다.

브라우저가 이 모든 과정을 얼마나 효율적으로 처리하는지에 따라 사용자 경험이 결정됩니다.

infodori1234

Next 🏠 메모리 누수(Memory Leak) 쉽게 이해하기: 🖥 낭비되는 컴퓨터의 기억력 ❌ »

Previous « 🛑 CORS 오류 원리 완벽 해설: 브라우저 보안의 필수 관문! 🛡️

Published by

infodori1234

Tags: CRP

2개월 ago

🖥️ 브라우저 렌더링 과정 (CRP) : 웹페이지가 눈앞에 나타나기까지의 마법

(Critical Rendering Path, 핵심 렌더링 경로 완벽 이해)

🚀 CRP의 5단계 요약: 웹페이지를 그리는 순서

1️⃣ DOM 트리 구축 (Document Object Model)

2️⃣ CSSOM 트리 구축 (CSS Object Model)

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

4️⃣ 레이아웃 (Layout / Reflow)

5️⃣ 페인팅 (Painting / Rasterization)

🖼️ 합성 (Compositing)

💡 성능 최적화의 핵심 (CRP를 줄여라!)

Recent Posts

🖥 NetBIOS over TCP IP NBT 완전 가이드

🏠 JSON Schema: 데이터 유효성 검증의 표준 설계도 🖥

🏠 ECMAScript 3 호환성 완전 정리 가이드

🖥 CoffeeScript 완전 가이드

🏠 메모리 누수(Memory Leak) 쉽게 이해하기: 🖥 낭비되는 컴퓨터의 기억력 ❌

🛑 CORS 오류 원리 완벽 해설: 브라우저 보안의 필수 관문! 🛡️

🖥️ 브라우저 렌더링 과정 (CRP) : 웹페이지가 눈앞에 나타나기까지의 마법

(Critical Rendering Path, 핵심 렌더링 경로 완벽 이해)

🚀 CRP의 5단계 요약: 웹페이지를 그리는 순서

1️⃣ DOM 트리 구축 (Document Object Model)

2️⃣ CSSOM 트리 구축 (CSS Object Model)

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

4️⃣ 레이아웃 (Layout / Reflow)

5️⃣ 페인팅 (Painting / Rasterization)

🖼️ 합성 (Compositing)

💡 성능 최적화의 핵심 (CRP를 줄여라!)

Related Post

Recent Posts

🖥 NetBIOS over TCP IP NBT 완전 가이드

🏠 JSON Schema: 데이터 유효성 검증의 표준 설계도 🖥

🏠 ECMAScript 3 호환성 완전 정리 가이드

🖥 CoffeeScript 완전 가이드

🏠 메모리 누수(Memory Leak) 쉽게 이해하기: 🖥 낭비되는 컴퓨터의 기억력 ❌

🛑 CORS 오류 원리 완벽 해설: 브라우저 보안의 필수 관문! 🛡️