Files

T

Antigravity Agent 504fd5fb42 [G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00

4.7 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

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.

매 핵심

매 단계

DOM: HTML parse → Document Object Model.
CSSOM: CSS parse → CSS Object Model (매 render-blocking).
Render Tree: DOM + CSSOM merge — 매 visible nodes only.
Layout (Reflow): geometry 계산 — 매 viewport relative position/size.
Paint: 매 pixel 의 fill — layer별.
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 권장.

매 응용

Above-the-fold critical CSS inline.
JS defer / type="module" — 매 default async.
Preload key resources — <link rel="preload" as="font">.
Speculation Rules API (Chrome 122+) — prerender next nav.

💻 패턴

1. Critical CSS inline

<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

<script src="/app.js" defer></script>
<script type="module" src="/app.mjs"></script>
<!-- module = defer by default -->

3. Resource hints

<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

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* avoid FOIT */
}

5. Speculation Rules (Chrome 122+, 2024-)

<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
}
</script>

6. Avoid layout thrash

// 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

.card {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

8. View Transitions API (2024-)

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

4.7 KiB Raw Blame History