Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리: - 오류 캡처/미완성 stub 문서 227개 제거 - 교차폴더 중복 43클러스터 병합 (63파일 → redirect) - 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건 - 카테고리 MOC 6개 신규 생성 - Graph 섹션 미해결 related-keyword 링크 10,058건 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00
parent 2a4a5046b6
commit f8b21af4be
2874 changed files with 15296 additions and 27684 deletions
@@ -2,157 +2,26 @@
 id: wiki-2026-0508-critical-rendering-path-crp
 title: Critical Rendering Path (CRP)
 category: 10_Wiki/Topics
-status: verified
-canonical_id: self
-aliases: [CRP, Browser Render Pipeline]
-duplicate_of: none
+status: duplicate
+canonical_id: wiki-2026-0508-critical-rendering-path
+duplicate_of: "[[Critical Rendering Path (CRP)]]"
+aliases: []
 source_trust_level: A
 confidence_score: 0.9
-verification_status: applied
-tags: [browser, rendering, performance, web-vitals]
-raw_sources: []
-last_reinforced: 2026-05-10
+verification_status: redirected
+tags: [duplicate]
+last_reinforced: 2026-05-20
 github_commit: pending
-tech_stack:
-  language: HTML/CSS/JS
-  framework: Browser
 ---

 # Critical Rendering Path (CRP)

-## 매 한 줄
-> **"매 CRP = HTML/CSS/JS → pixel 의 매 변환 단계 sequence."**. 매 단계: DOM 구축 → CSSOM 구축 → Render Tree → Layout (reflow) → Paint → Composite. 매 단계마다 매 blocking resource 의 latency가 매 LCP / FCP 의 결정. 매 2026 perspective는 INP / Core Web Vitals + speculation rules + View Transitions API.
-
-## 매 핵심
-
-### 매 단계
-1. **DOM**: HTML parse → Document Object Model.
-2. **CSSOM**: CSS parse → CSS Object Model (매 render-blocking).
-3. **Render Tree**: DOM + CSSOM merge — 매 visible nodes only.
-4. **Layout (Reflow)**: geometry 계산 — 매 viewport relative position/size.
-5. **Paint**: 매 pixel 의 fill — layer별.
-6. **Composite**: GPU 의 layer 의 final 합성.
-
-### 매 blocking
- CSS = 매 render-blocking — `<link rel="stylesheet">` HEAD 안에서 매 parse 차단.
- JS = 매 parser-blocking — `<script>` 매 DOM build 차단 (async/defer 외).
- Font = 매 paint-blocking (FOIT) — `font-display: swap` 권장.
-
-### 매 응용
-1. Above-the-fold critical CSS inline.
-2. JS `defer` / `type="module"` — 매 default async.
-3. Preload key resources — `<link rel="preload" as="font">`.
-4. Speculation Rules API (Chrome 122+) — prerender next nav.
-
-## 💻 패턴
-
-### 1. Critical CSS inline
-```html
-<head>
-  <style>
-    /* above-the-fold only */
-    body { margin: 0; font: 16px/1.5 system-ui; }
-    .hero { min-height: 60vh; }
-  </style>
-  <link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" href="/main.css"></noscript>
-</head>
-```
-
-### 2. Defer + module scripts
-```html
-<script src="/app.js" defer></script>
-<script type="module" src="/app.mjs"></script>
-<!-- module = defer by default -->
-```
-
-### 3. Resource hints
-```html
-<link rel="preconnect" href="https://cdn.example.com">
-<link rel="dns-prefetch" href="https://api.example.com">
-<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
-<link rel="modulepreload" href="/chunks/router.js">
-```
-
-### 4. font-display swap
-```css
-@font-face {
-  font-family: 'Inter';
-  src: url('/fonts/inter.woff2') format('woff2');
-  font-display: swap; /* avoid FOIT */
-}
-```
-
-### 5. Speculation Rules (Chrome 122+, 2024-)
-```html
-<script type="speculationrules">
-{
-  "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
-}
-</script>
-```
-
-### 6. Avoid layout thrash
-```javascript
-// BAD — read/write/read/write triggers reflow each time
-elements.forEach((el) => {
-  el.style.width = el.offsetWidth + 10 + 'px';
-});
-
-// GOOD — batch reads then writes
-const widths = elements.map((el) => el.offsetWidth);
-elements.forEach((el, i) => { el.style.width = widths[i] + 10 + 'px'; });
-```
-
-### 7. CSS containment
-```css
-.card {
-  contain: layout paint style;
-  content-visibility: auto;
-  contain-intrinsic-size: 0 200px;
-}
-```
-
-### 8. View Transitions API (2024-)
-```javascript
-document.startViewTransition(() => {
-  updateDOM();
-});
-```
-
-## 매 결정 기준
-| 상황 | Approach |
-|---|---|
-| LCP > 2.5s | Critical CSS inline + preload hero image. |
-| INP > 200ms | 매 long task 의 break — `scheduler.yield()`. |
-| CLS > 0.1 | 매 fixed dimensions, font-display swap + size-adjust. |
-| 매 deep tree | `content-visibility: auto`. |
-| Next nav predict | Speculation Rules. |
-
-**기본값**: 매 Web Vitals 측정 → 매 bottleneck 식별 → targeted optimization.
+> **이 문서는 [[Critical Rendering Path (CRP)]] 의 중복본입니다.** Canonical 문서로 redirect.

 ## 🔗 Graph
- 부모: [[Browser Rendering]] · [[Web Performance]]
- 변형: [[Server-Side Rendering]] · [[Streaming SSR]]
- 응용: [[Core Web Vitals]] · [[LCP Optimization]]
- Adjacent: [[DOM]] · [[CSSOM]] · [[Layout Thrashing]]
+- 부모: [[Critical Rendering Path (CRP)]] (canonical)

-## 🤖 LLM 활용
-**언제**: 매 resource hint 매 selection, critical CSS extraction script.
-**언제 X**: 매 actual measurement (Lighthouse, WebPageTest) — 매 LLM 추측 X.
-
-## ❌ 안티패턴
- **@import in CSS**: 매 serial download — `<link>` 사용.
- **`<script>` in head w/o defer**: 매 DOM 파싱 차단.
- **Sync XHR**: 매 deprecated — 매 fetch async.
- **Forced sync layout**: 매 read-write-read pattern — batch.
-
-## 🧪 검증 / 중복
- Verified (web.dev, Chrome DevRel docs 2024-2026).
- 신뢰도 A.
-
-## 🕓 Changelog
+## 🕓 변경 이력
 | 날짜 | 변경 |
 |---|---|
-| 2026-05-08 | Phase 1 |
-| 2026-05-10 | Manual cleanup — CRP + Speculation Rules + View Transitions |
+| 2026-05-20 | 중복 병합 — canonical 문서로 redirect |