Files

T

Antigravity Agent f8b21af4be 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

5.1 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

Render Tree

매 한 줄

"매 DOM × CSSOM = Render Tree". Browser는 매 parsed HTML (DOM) 과 매 styles (CSSOM) 을 매 merge — visible nodes만 매 골라 layout, paint, composite의 input 으로 사용. 2026 Chromium은 매 LayoutNG + RenderingNG로 매 진화.

매 핵심

매 Pipeline (Critical Rendering Path)

HTML → DOM (tokenize + tree construct).
CSS → CSSOM (parse stylesheets, compute cascade).
DOM + CSSOM → Render Tree — 매 display: none 노드는 매 제외, ::before/::after 매 포함.
Layout (Reflow) — geometry 계산.
Paint — pixel commands → layers.
Composite — GPU layer merge → screen.

매 Render Tree ≠ DOM

DOM 의 모든 노드 의 X. <head>, <script>, display:none 매 제외.
visibility: hidden 의 매 포함됨 (매 space 차지).
Pseudo-elements (::before) 매 추가됨 (DOM 에 없음).

매 Blocking

CSS 의 render-blocking by default: CSSOM 완성 전에는 매 render tree 못 만듦.
<script> 의 parser-blocking — defer/async로 완화.
<link rel="preload"> + media query 매 selective load.

매 2026 modern state (RenderingNG)

LayoutNG — fragment tree로 매 incremental, isolation.
CompositeAfterPaint (CAP) — paint ordering 의 매 composite 단계로 통합.
Off-main-thread scrolling/animation — composite-only properties (transform, opacity) 매 main thread skip.
CSS Containment (contain: layout paint) — subtree isolation.
content-visibility: auto — 매 viewport 외 subtree skip layout/paint.

매 응용

Critical CSS inline → 매 first paint 단축.
content-visibility: auto 매 long page virtualization.
will-change: transform 매 layer promotion hint.

💻 패턴

Critical CSS inline

<head>
  <style>
    /* above-the-fold only */
    .hero { font-size: 3rem; color: #111; }
  </style>
  <link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">
</head>

content-visibility virtualization

article.long-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 1000px;  /* placeholder size */
}

Composite-only animation (avoid layout/paint)

.menu { transform: translateX(-100%); transition: transform 200ms ease; }
.menu.open { transform: translateX(0); }
/* GPU composites; main thread free */

Avoid layout thrashing

// BAD: read-write-read-write triggers sync layout each iter
for (const el of items) {
  el.style.width = el.offsetWidth + 10 + 'px';
}

// GOOD: batch reads, then batch writes
const widths = items.map(el => el.offsetWidth);
items.forEach((el, i) => { el.style.width = widths[i] + 10 + 'px'; });

CSS Containment

.card {
  contain: layout style paint;
  /* descendant changes can't affect outside */
}

Render-blocking analysis

// Find render-blocking resources via PerformanceObserver
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.renderBlockingStatus === 'blocking') {
      console.warn('blocking:', entry.name);
    }
  }
}).observe({ type: 'resource', buffered: true });

매 결정 기준

상황	Approach
First-paint 단축	Critical CSS inline + async/defer JS
Long scrollable page	`content-visibility: auto`
Smooth animation	Composite-only (transform/opacity) + `will-change`
Widget isolation	`contain: layout paint`
Hidden tab UI	`display: none` (full skip) vs `visibility: hidden` (preserve space)

기본값: composite-only animations, defer non-critical CSS/JS, contain on widgets.

🔗 Graph

부모: Browser-Rendering · Critical-Rendering-Path
응용: Web-Performance · Core Web Vitals Optimization (INP, LCP 개선)
Adjacent: Reflow_and_Repaint · CSSOM · DOM

🤖 LLM 활용

언제: performance audit explanations, CSS-perf debugging. 언제 X: production profiling은 매 real Chrome DevTools / Lighthouse / WebPageTest 사용 — LLM의 매 verification은 X.

❌ 안티패턴

Layout thrashing: read/write 매 interleave → forced synchronous layout.
top/left animation: triggers layout per frame; use transform.
거대 inline <style>: matched HTML cache의 invalidation. Critical only.
will-change overuse: 매 모든 element 에 적용 → memory blow-up.

🧪 검증 / 중복

Verified (web.dev rendering performance, Chromium RenderingNG docs, MDN CRP).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — full rewrite covering DOM/CSSOM merge, blocking, modern RenderingNG

5.1 KiB Raw Blame History Unescape Escape