2nd/10_Wiki/Topics/AI_and_ML/렌더링 최적화 개념 설명 자료.md

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

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
wiki-2026-0508-렌더링-최적화-개념-설명-자료	렌더링 최적화 개념 설명 자료	10_Wiki/Topics	verified	self	Rendering Optimization Web Rendering Performance Frontend Rendering	none	A	0.9	applied	rendering performance web browser optimization		2026-05-10	pending	language framework JavaScript Browser

렌더링 최적화 개념 설명 자료

매 한 줄

"매 frame 60fps = 16.67ms budget. 매 그 budget 안에서 layout / paint / composite 모두 끝나야 한다". Browser 매 critical rendering path 의 각 단계 (Parse → Style → Layout → Paint → Composite) 의 cost 를 이해하고, 매 reflow 를 최소화하고 GPU compositing layer 로 offload 하는 것이 매 핵심.

매 핵심

매 Critical Rendering Path

1. Parse HTML → DOM tree
2. Parse CSS → CSSOM
3. Style → DOM + CSSOM 합쳐 Render Tree
4. Layout (Reflow) → 매 element 의 geometry (x, y, w, h) 계산
5. Paint → pixel 채우기 (color, image, shadow)
6. Composite → GPU layer 합성

매 비싼 동작 ranking

• Layout (Reflow): 가장 비쌈. width, height, top, left, font-size 변경 → 매 reflow trigger.
• Paint: 중간. color, background, box-shadow 변경.
• Composite only: 매 cheap. transform, opacity 만 변경 → GPU 에서 처리.

매 응용

1. Animation: transform / opacity 만 사용 (composite-only).
2. Scroll perf: passive event listener, will-change.
3. Long list: virtualization (react-window, virtual scroll).

💻 패턴

Composite-only animation (60fps 보장)

/* 매 BAD — reflow 매 frame */
.bad { transition: left 300ms; }
.bad.move { left: 200px; }

/* 매 GOOD — composite only */
.good { transition: transform 300ms; will-change: transform; }
.good.move { transform: translateX(200px); }

Batch DOM read/write (avoid layout thrashing)

// 매 BAD — read/write/read/write → forced sync layout 매번
elements.forEach(el => {
  const w = el.offsetWidth;        // read (layout)
  el.style.width = (w * 2) + 'px'; // write (invalidate)
});

// 매 GOOD — batch read first, then batch write
const widths = elements.map(el => el.offsetWidth);  // all reads
elements.forEach((el, i) => {
  el.style.width = (widths[i] * 2) + 'px';          // all writes
});

requestAnimationFrame (rAF) for animation

function animate(ts) {
  const progress = (ts - start) / 300;
  el.style.transform = `translateX(${progress * 200}px)`;
  if (progress < 1) requestAnimationFrame(animate);
}
let start;
requestAnimationFrame(t => { start = t; animate(t); });

Virtual list (long scrollable)

// react-window pattern
import { FixedSizeList } from 'react-window';
<FixedSizeList height={600} itemCount={100000} itemSize={40} width={400}>
  {({ index, style }) => <div style={style}>Row {index}</div>}
</FixedSizeList>

IntersectionObserver (lazy image)

const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      io.unobserve(e.target);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));

CSS containment

/* 매 reflow scope 를 element 안으로 제한 */
.card { contain: layout paint; }
.list-item { content-visibility: auto; contain-intrinsic-size: 40px; }

Debounce expensive resize

let raf;
window.addEventListener('resize', () => {
  cancelAnimationFrame(raf);
  raf = requestAnimationFrame(() => recomputeLayout());
});

매 결정 기준

상황	Approach
micro-animation	transform / opacity + will-change
1000+ list items	virtualize (react-window)
화면 밖 image	loading="lazy" 또는 IntersectionObserver
heavy paint area	contain: paint
scroll jank	passive listener, content-visibility

기본값: 매 transform/opacity animation + virtualize long list + lazy load images.

🔗 Graph

• 부모: Frontend_Performance · Web_Vitals
• 변형: Reflow_and_Repaint · Compositing
• 응용: Lazy Loading
• Adjacent: Core Web Vitals Optimization (INP, LCP, CLS) · LCP · INP · CLS

🤖 LLM 활용

언제: 60fps 안 나오는 페이지 진단, scroll jank, animation stutter, slow LCP. 언제 X: server-side rendering bottleneck (그건 SSR 영역).

❌ 안티패턴

• !important 남용 으로 specificity battle: 매 style recalc 비용 증가.
• inline style 매번 직접 set: 매 batch 안 됨, layout thrash.
• onscroll 안에서 무거운 작업: 매 throttle / rAF 필요.
• transform 없이 top/left 로 animation: 매 매 frame reflow.

🧪 검증 / 중복

• Verified (web.dev rendering performance guide, MDN, Chrome DevTools docs).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — critical rendering path + reflow/composite optimization patterns