[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,94 +2,173 @@
|
||||
id: wiki-2026-0508-브라우저-렌더링-프로세스-crp
|
||||
title: 브라우저 렌더링 프로세스 (CRP)
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Critical Rendering Path, CRP, 렌더링 파이프라인]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [browser, rendering, performance, web]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: javascript
|
||||
framework: web-platform
|
||||
---
|
||||
|
||||
# [[브라우저 렌더링 프로세스 (CRP)|브라우저 렌더링 프로세스 (CRP]]
|
||||
# 브라우저 렌더링 프로세스 (CRP)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
브라우저 렌더링 프로세스, 즉 중요 렌더링 경로([[Critical Rendering Path|Critical Rendering Path]], CRP)는 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 변환하기 위해 실행하는 일련의 단계입니다 [1, 2]. 이 과정은 DOM 및 [[CSSOM|CSSOM]] 트리 생성, 렌더 트리 합성, 레이아웃(Reflow) 계산, 그리고 화면에 픽셀을 그리는 페인트(Paint) 및 합성(Composite) 단계로 구성됩니다 [2, 3]. 이 경로를 최적화하는 것은 첫 렌더링 시간을 단축하고, 원활한 사용자 상호작용을 보장하며 성능 병목현상을 피하기 위한 프론트엔드 엔지니어링의 핵심 목표입니다 [1, 4].
|
||||
## 매 한 줄
|
||||
> **"매 byte → pixel 의 6-stage pipeline"**. CRP는 HTML/CSS/JS bytes 가 actual pixels 가 되기 전 거치는 parse → DOM/CSSOM → Render Tree → Layout → Paint → Composite 단계. 매 stage 차단/지연 의 LCP, INP regression 의 root cause.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
브라우저 렌더링 프로세스는 코드가 화면의 시각적 요소로 변환되는 과정으로, 다음과 같은 핵심 단계들을 거칩니다:
|
||||
## 매 핵심
|
||||
|
||||
* **문서 객체 모델(DOM) 구축:** 브라우저가 서버로부터 HTML 데이터를 수신하면, 바이트를 문자, 토큰, 노드로 순차적으로 변환하여 계층적인 DOM 트리를 구성합니다 [1, 5]. 이 DOM 구축은 점진적으로 진행되므로 브라우저는 네트워크 요청이 활성화된 상태에서도 트리를 구축할 수 있습니다 [1, 6]. 그러나 노드 수가 많아질수록 이후의 렌더링 단계에서 더 많은 계산 시간이 소요됩니다 [6, 7].
|
||||
* **CSS 객체 모델(CSSOM) 구축:** CSS는 콘텐츠가 어떻게 스타일링될지 정의합니다. DOM 구축과 달리 CSSOM 구축은 점진적이지 않으며 렌더링을 차단(render-[[Blocking|Blocking]])하는 작업입니다 [6, 7]. 브라우저는 스타일이 적용되지 않은 콘텐츠가 화면에 노출되는 현상(FOUC)을 방지하기 위해 연결된 모든 스타일시트를 다운로드하고 파싱할 때까지 렌더 트리를 빌드하지 않습니다 [6, 7].
|
||||
* **렌더 트리([[Render Tree|Render Tree]]) 합성:** DOM과 CSSOM이 모두 준비되면 브라우저는 두 트리를 결합하여 렌더 트리를 만듭니다 [8, 9]. 이 트리는 화면에 렌더링하는 데 필요한 노드만 포함하므로, `<script>`, `<meta>` 태그나 CSS에서 `display: none`으로 설정된 요소는 렌더 트리에 포함되지 않습니다 [8-10].
|
||||
* **레이아웃(Layout) 또는 리플로우(Reflow):** 렌더 트리가 구성되면 브라우저는 기기의 뷰포트 크기와 박스 모델을 기반으로 각 시각적 요소의 정확한 위치와 치수(너비, 높이 등)를 계산합니다 [11-13]. 화면 크기 조정이나 DOM의 추가/삭제와 같은 변경이 일어나면 페이지 전체의 레이아웃을 다시 계산해야 하며 이를 리플로우(Reflow)라고 부르는데, 이는 계산 비용이 매우 높습니다 [11, 14, 15].
|
||||
* **페인트(Paint) 및 합성(Compositing):** 레이아웃 계산이 완료되면 기하학적 구조와 스타일을 바탕으로 브라우저는 화면의 픽셀을 채우는 페인트(Repaint) 단계를 거칩니다 [16-18]. 색상, 그림자 등의 시각적 속성을 업데이트하는 페인트 작업은 리플로우보다는 자원 소모가 덜하지만 과도하게 발생하면 성능에 영향을 줍니다 [19, 20]. 마지막으로 여러 레이어를 단일 이미지로 결합하는 합성(Compositing) 단계를 거치며, 최신 브라우저들은 렌더링 성능 최적화를 위해 특정 작업들을 GPU(그래픽 처리 장치)로 오프로드합니다 [16, 21].
|
||||
### 매 6-stage pipeline
|
||||
- **Parse**: HTML byte stream → token → DOM. CSS bytes → CSSOM (render-blocking).
|
||||
- **Render Tree**: DOM + CSSOM merge, `display:none` 제외.
|
||||
- **Layout (Reflow)**: 매 element 의 geometric box (x, y, w, h) 계산.
|
||||
- **Paint**: pixels 의 layer 별 raster (text, color, image, shadow).
|
||||
- **Composite**: GPU 의 layer 합성 — `transform`, `opacity` 만 매 단계 처리 가능.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[DOM 및 CSSOM|DOM 및 CSSOM]], Reflow 및 Repaint, Virtual DOM, [[렌더링 차단 리소스(Render-blocking resources)|렌더링 차단 리소스(Render-blocking resources]]
|
||||
- **Projects/Contexts:** [[프론트엔드 성능 최적화(Frontend Performance Optimization)|프론트엔드 성능 최적화(Frontend Performance Optimization]], [[단일 페이지 애플리케이션(SPA) 렌더링 설계|단일 페이지 애플리케이션(SPA) 렌더링 설계]]
|
||||
- **Contradictions/Notes:** 주어진 소스들 간에 렌더링 과정과 관련하여 기술적인 모순은 없으나, 최적화의 우선순위 측면에서 단순히 페인트(Paint) 시간을 줄이는 미세한 CSS 선택자 성능 최적화보다는 레이아웃(Reflow) 발생을 최소화하거나 불필요한 DOM 노드를 줄이는 것이 훨씬 큰 성능 향상을 가져온다는 점을 주의해야 합니다 [14, 17, 22].
|
||||
### 매 차단 요소
|
||||
- CSS 매 default render-blocking — `<head>` 의 위치 의 영향.
|
||||
- `<script>` 매 default parser-blocking — `defer` / `async` 의 회피.
|
||||
- Synchronous JS 매 layout 강제 (forced reflow / layout thrashing).
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-25*
|
||||
### 매 응용
|
||||
1. LCP 최적화 — critical CSS inline + preload hero image.
|
||||
2. INP 최적화 — long task 분할, `requestIdleCallback` 활용.
|
||||
3. Composite-only animation — `transform` / `opacity` 만 60fps 보장.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
## 💻 패턴
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
### Critical CSS inline (LCP < 2.5s)
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
/* Above-the-fold critical CSS only */
|
||||
body { margin: 0; font: 16px/1.5 system-ui; }
|
||||
.hero { height: 100vh; background: #0a0a0a; }
|
||||
</style>
|
||||
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
|
||||
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">
|
||||
</head>
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Defer non-critical JS
|
||||
```html
|
||||
<!-- parse 안 차단 — DOM 완료 후 실행 -->
|
||||
<script defer src="/app.js"></script>
|
||||
<!-- 매 즉시 download but execution 매 비동기 -->
|
||||
<script async src="/analytics.js"></script>
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Layout thrashing 회피
|
||||
```javascript
|
||||
// 매 안 좋은 패턴 — read/write interleave 의 N forced reflow
|
||||
boxes.forEach(box => {
|
||||
const w = box.offsetWidth; // read (force layout)
|
||||
box.style.width = (w * 2) + 'px'; // write (invalidate)
|
||||
});
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
// 매 fix — batch read, batch write
|
||||
const widths = boxes.map(b => b.offsetWidth); // batch read
|
||||
boxes.forEach((b, i) => b.style.width = widths[i] * 2 + 'px'); // batch write
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### Composite-only animation
|
||||
```css
|
||||
/* 매 GOOD — GPU compositor 의 처리, layout/paint skip */
|
||||
.slide {
|
||||
transform: translateX(0);
|
||||
transition: transform 200ms ease-out;
|
||||
will-change: transform; /* hint to compositor */
|
||||
}
|
||||
.slide.active { transform: translateX(100%); }
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
/* 매 BAD — 매 frame 의 layout + paint 야기 */
|
||||
.slide-bad {
|
||||
left: 0;
|
||||
transition: left 200ms;
|
||||
}
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
### CSS containment (scope reflow)
|
||||
```css
|
||||
.card {
|
||||
contain: layout style paint; /* 매 card 의 reflow 가 outer 에 전파 안 됨 */
|
||||
content-visibility: auto; /* offscreen skip */
|
||||
}
|
||||
```
|
||||
|
||||
### INP 최적화 — yield to main thread
|
||||
```javascript
|
||||
async function processLargeList(items) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
process(items[i]);
|
||||
if (i % 50 === 0) {
|
||||
await new Promise(r => setTimeout(r, 0)); // yield
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 매 modern API (2026)
|
||||
function yieldToMain() {
|
||||
return scheduler.yield ? scheduler.yield() : new Promise(r => setTimeout(r));
|
||||
}
|
||||
```
|
||||
|
||||
### PerformanceObserver — measure CRP
|
||||
```javascript
|
||||
new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
console.log(entry.name, entry.startTime, entry.duration);
|
||||
}
|
||||
}).observe({ type: 'largest-contentful-paint', buffered: true });
|
||||
|
||||
new PerformanceObserver((list) => {
|
||||
for (const e of list.getEntries()) {
|
||||
if (e.duration > 50) console.warn('Long task:', e);
|
||||
}
|
||||
}).observe({ type: 'longtask', buffered: true });
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Hero image LCP 느림 | `<link rel=preload>` + `fetchpriority=high` |
|
||||
| Animation jank | `transform`/`opacity` 만, `will-change` hint |
|
||||
| 큰 list scroll lag | `content-visibility: auto` |
|
||||
| Form input INP > 200ms | `scheduler.yield()`, debounce |
|
||||
| Third-party script blocking | `async` + Partytown |
|
||||
|
||||
**기본값**: defer non-critical JS, inline critical CSS, composite-only animation.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Web Performance]] · [[Core Web Vitals]]
|
||||
- 변형: [[Server-Side Rendering (SSR)]] · [[Streaming SSR]]
|
||||
- 응용: [[LCP 최적화]] · [[INP 최적화]] · [[CLS 최적화]]
|
||||
- Adjacent: [[CSS Containment]] · [[content-visibility]] · [[Speculation Rules API]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: jank/LCP/INP 회귀 진단, animation 최적화, third-party script 영향 분석.
|
||||
**언제 X**: 매 framework-specific reactivity (React reconciler) 매 별도 layer — CRP 만 으로 안 풀림.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`document.write` 사용**: parser block, modern browser 의 무시.
|
||||
- **synchronous XHR**: main thread block, INP 파괴.
|
||||
- **inline script after CSS**: CSSOM wait 의 parser stall.
|
||||
- **animate `width`/`top`**: 매 frame layout — composite-only 만 사용.
|
||||
- **`@import` in CSS**: serialize CSS download — `<link>` 의 사용.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (web.dev — Critical Rendering Path, Chrome DevTools Performance panel docs).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — CRP 6-stage pipeline + LCP/INP patterns |
|
||||
|
||||
Reference in New Issue
Block a user