2nd/10_Wiki/Topics/AI_and_ML/Chrome DevTools 메모리 프로파일링.md

---
id: wiki-2026-0508-chrome-devtools-memory-profiling
title: Chrome DevTools Memory Profiling
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [heap snapshot, memory leak detection, retaining path, allocation timeline, V8 GC, detached DOM]
duplicate_of: none
source_trust_level: A
confidence_score: 0.93
verification_status: applied
tags: [chrome-devtools, memory-profiling, heap-snapshot, memory-leak, v8, gc, web-performance, browser]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JS / browser
  framework: Chrome DevTools / V8
---

# Chrome DevTools Memory Profiling

## 📌 한 줄 통찰
> **"매 heap 의 snapshot 의 leak 의 detect"**. 매 V8 GC 의 못 하는 reference 의 trace. 매 retaining path 의 root cause. 매 3-snapshot 기법 + 매 allocation timeline 의 modern leak hunt 의 standard.

## 📖 핵심

### 매 3 tool

#### 1. Heap Snapshot
- 매 specific 시점 의 entire object graph.
- 매 GC 가 매 force 후 의 capture.
- 매 view: Summary, Comparison, Containment.

#### 2. Allocation Timeline (Allocation instrumentation)
- 매 매 50ms 의 allocation track.
- 매 stack trace 의 keep.
- 매 blue bar = 매 alive, 매 grey = 매 GC'd.

#### 3. Allocation Sampling
- 매 statistical sampling.
- 매 production-friendly (low overhead).

### 매 3-snapshot 기법
1. **Snapshot 1**: 매 baseline (cleanup 의 후).
2. 매 suspect action 의 N times.
3. **Snapshot 2**: 매 mid.
4. 매 same action 의 N times.
5. **Snapshot 3**: 매 final.
6. 매 Comparison 의 #2 → #3.
7. 매 새 object 의 leak candidate.

### 매 leak source (common)

#### Detached DOM
- 매 element 의 remove 가 매 reference 가 keep.

#### Closure trap
- 매 function 의 outer scope 의 large object 의 capture.

#### Forgotten timer / listener
- 매 setInterval / addEventListener 의 cleanup 의 X.

#### Console.log
- 매 logged object 의 reference 의 hold (devtools open 시).

#### WebSocket / fetch retain
- 매 connection 의 close 의 X.

#### Cache unbounded
- 매 Map / Set 의 grow 의 limit X.

### 매 retaining path (Retainers)
- 매 GC root → 매 object 의 chain.
- 매 root: 매 window, document, persistent store.
- 매 chain 의 break = 매 fix.

### 매 GC type (V8)
- **Scavenge** (young gen): 매 frequent, fast.
- **Mark-Compact** (old gen): 매 less frequent, expensive.
- **Incremental**: 매 spread over frame.

### Heap profile vs Performance
| Tool | 측정 |
|---|---|
| Memory tab | 매 heap snapshot, allocation, leak |
| Performance tab | 매 timing + 매 memory chart |
| Coverage tab | 매 unused JS / CSS |
| Lighthouse | 매 budget audit |

## 💻 패턴

### Code (intentional leak — for testing)
```js
// 매 detached DOM leak
let leaked = [];
function leak() {
  const el = document.createElement('div');
  el.innerHTML = 'x'.repeat(1_000_000);
  document.body.appendChild(el);
  document.body.removeChild(el);
  leaked.push(el);  // 매 reference 의 keep — 매 leak
}
```

### Profiling steps (DevTools)
```
1. Memory tab → Heap snapshot → Take snapshot (snapshot 1).
2. 매 suspect action 의 5-10 times.
3. Take snapshot (snapshot 2).
4. 매 same action 의 5-10 times.
5. Take snapshot (snapshot 3).
6. View dropdown → "Comparison" between 2 and 3.
7. Sort by "# Delta" or "Size Delta" descending.
8. Look for:
   - Detached HTMLDivElement (or similar)
   - Closure
   - (compiled code) holding objects
9. Click constructor → object → "Retainers" panel.
10. Trace path to GC root.
```

### Common fix patterns
```js
// 매 ❌ Leak
class Component {
  constructor() {
    this.handler = () => this.doSomething();
    window.addEventListener('resize', this.handler);
    setInterval(this.handler, 1000);
  }
  
  destroy() {
    // 매 forgot to remove
  }
}

// 매 ✅ Fix
class Component {
  constructor() {
    this.handler = () => this.doSomething();
    this.intervalId = setInterval(this.handler, 1000);
    window.addEventListener('resize', this.handler);
  }
  
  destroy() {
    window.removeEventListener('resize', this.handler);
    clearInterval(this.intervalId);
    this.handler = null;
  }
}
```

### WeakRef / WeakMap (modern)
```js
// 매 cache 의 강제 keep 의 X
const cache = new WeakMap();
function getMetadata(obj) {
  if (!cache.has(obj)) cache.set(obj, computeExpensive(obj));
  return cache.get(obj);
}
// 매 obj 의 GC 시 의 entry 도 sweep.
```

### performance.memory API
```js
// 매 Chromium 만 (deprecated 가, 매 still useful)
function logMemory(label) {
  if (performance.memory) {
    const m = performance.memory;
    console.log(`${label}: used=${(m.usedJSHeapSize / 1048576).toFixed(1)}MB, ` +
                `total=${(m.totalJSHeapSize / 1048576).toFixed(1)}MB`);
  }
}

logMemory('before');
heavyOperation();
logMemory('after');
```

### measureUserAgentSpecificMemory (modern, secure)
```js
async function checkMemory() {
  if (!('measureUserAgentSpecificMemory' in performance)) return;
  
  const result = await performance.measureUserAgentSpecificMemory();
  console.log(`Total: ${(result.bytes / 1048576).toFixed(1)} MB`);
  for (const breakdown of result.breakdown) {
    console.log(`  ${breakdown.types.join('+')}: ${(breakdown.bytes / 1048576).toFixed(1)} MB`);
  }
}
```

→ 매 cross-origin isolated 환경 만.

### Detect leaked listener (test)
```js
function getEventListenerCount(element) {
  // 매 Chrome devtools console 만
  return getEventListeners(element);
}

// 매 test
const before = getEventListenerCount(window);
mountAndUnmountComponent();
const after = getEventListenerCount(window);
if (Object.keys(after).length > Object.keys(before).length) {
  console.error('Listener leak detected');
}
```

### React-specific (heap on unmount)
```jsx
import { useEffect } from 'react';

function Comp() {
  useEffect(() => {
    const handler = () => {};
    window.addEventListener('scroll', handler);
    const id = setInterval(() => {}, 1000);
    
    // 매 cleanup
    return () => {
      window.removeEventListener('scroll', handler);
      clearInterval(id);
    };
  }, []);
  return <div />;
}
```

### Chrome Lighthouse memory budget
```yaml
# 매 lighthouse 의 audit (CI)
- name: Lighthouse memory check
  uses: treosh/lighthouse-ci-action@v10
  with:
    urls: 'https://staging.example.com/'
    budgetPath: '.lighthouse/budget.json'
```

```json
[{
  "resourceSizes": [
    { "resourceType": "script", "budget": 300 },
    { "resourceType": "total", "budget": 1000 }
  ]
}]
```

### Headless leak detection (Puppeteer)
```js
const puppeteer = require('puppeteer');

async function detectLeak() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const before = (await page.metrics()).JSHeapUsedSize;
  
  for (let i = 0; i < 100; i++) {
    await page.click('#leak-button');
  }
  
  // 매 GC force
  await page.evaluate(() => globalThis.gc?.());  // requires --js-flags="--expose-gc"
  
  const after = (await page.metrics()).JSHeapUsedSize;
  
  if (after / before > 2) {
    console.error(`Memory leak: ${before} → ${after}`);
  }
  
  await browser.close();
}
```

## 🤔 결정 기준
| 상황 | Tool |
|---|---|
| One-off leak hunt | Heap snapshot 3-shot |
| Allocation pattern | Allocation Timeline |
| Production prof | Allocation Sampling |
| Continuous (CI) | Puppeteer + metrics |
| Cross-origin | measureUserAgentSpecificMemory |
| React | DevTools Profiler + Memory |

**기본값**: 매 heap snapshot 3-shot + Comparison + Retainer trace.

## 🔗 Graph
- 부모: [[Web-Performance]] · [[Browser]] · [[Memory-Management]]
- 변형: [[Heap-Snapshot]] · [[Allocation-Timeline]] · [[Garbage-Collection]] · [[V8]]
- 응용: [[Memory-Leak-Detection]] · [[WeakMap]] · [[WeakRef]] · [[Lighthouse]]
- Adjacent: [[Bottlenecks]] · [[CSS Animations]] · [[Frontend-Performance]]

## 🤖 LLM 활용
**언제**: 매 memory leak hunt. 매 SPA performance audit. 매 long-running tab.
**언제 X**: 매 server-side. 매 CPU bottleneck (Performance tab).

## ❌ 안티패턴
- **No GC force**: 매 stale snapshot.
- **No baseline (1-shot)**: 매 noisy.
- **Console.log 의 evidence 의 ignore**: 매 false leak.
- **Production 의 Allocation Timeline**: 매 overhead.
- **Detached DOM 무시**: 매 typical 의 root cause.
- **Listener cleanup X**: 매 most leak.

## 🧪 검증 / 중복
- Verified (Chrome DevTools docs, V8 blog).
- 신뢰도 A.
- Related: [[Web-Performance]] · [[Bottlenecks]] · [[CSS Animations]] · [[Baseline-Project]].

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-04-19 | Auto-mapped |
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — 3 tool + 3-snapshot + leak source + 매 Puppeteer / WeakRef code |