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

---
id: wiki-2026-0508-렌더링-최적화-개념-설명-자료
title: 렌더링 최적화 개념 설명 자료
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Rendering Optimization, Web Rendering Performance, Frontend Rendering]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [rendering, performance, web, browser, optimization]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: 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 보장)
```css
/* 매 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)
```javascript
// 매 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
```javascript
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)
```javascript
// 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)
```javascript
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
```css
/* 매 reflow scope 를 element 안으로 제한 */
.card { contain: layout paint; }
.list-item { content-visibility: auto; contain-intrinsic-size: 40px; }
```

### Debounce expensive resize
```javascript
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)|Core_Web_Vitals]] · [[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 |