Files

T

Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.

2026-07-05 00:33:48 +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