Antigravity Agent
159 lines
4.7 KiB
Markdown
159 lines
4.7 KiB
Markdown
---
|
|
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
|
|
source_trust_level: A
|
|
confidence_score: 0.9
|
|
verification_status: applied
|
|
tags: [browser, rendering, performance, web-vitals]
|
|
raw_sources: []
|
|
last_reinforced: 2026-05-10
|
|
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.
|
|
|
|
## 🔗 Graph
|
|
- 부모: [[Browser Rendering]] · [[Web Performance]]
|
|
- 변형: [[Server-Side Rendering]] · [[Streaming SSR]]
|
|
- 응용: [[Core Web Vitals]] · [[LCP Optimization]]
|
|
- Adjacent: [[DOM]] · [[CSSOM]] · [[Layout Thrashing]]
|
|
|
|
## 🤖 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 |
|