Files

T

Antigravity Agent c24165b8bc refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게
[공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류.
문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인).

- Topic_Programming → Domain_Programming (내부 구조 보존)
- Topic_Graphic → Domain_Design
- Topic_Business → Domain_Product
- Topic_General → Domain_General
- _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning),
  Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing)
- 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서)
- 빈 폴더 정리 (memory/procedures)
- 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-07-11 11:05:56 +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, CLS)
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