--- id: wiki-2026-0508-chrome-v8-heap-analysis title: Chrome V8 Heap Analysis category: 10_Wiki/Topics status: verified canonical_id: self aliases: [V8 Heap Snapshot, Chrome DevTools Memory, Heap Profiler] duplicate_of: none source_trust_level: A confidence_score: 0.9 verification_status: applied tags: [v8, chrome, heap, debugging, performance] raw_sources: [] last_reinforced: 2026-05-10 github_commit: pending tech_stack: language: javascript framework: chrome-devtools --- # Chrome V8 Heap Analysis ## 매 한 줄 > **"매 heap snapshot 의 retain path"**. 매 V8 의 mark-sweep + generational GC 의 internal state 의 DevTools Memory tab 을 통한 introspection 의 production 의 leak 의 root cause 의 identification 의 enable. 매 2026 년 의 Chrome 132+ 의 trace-based + sampling allocator 의 < 5% overhead 의 production profiling 의 standard. ## 매 핵심 ### 매 Snapshot 종류 - **Heap snapshot**: 매 모든 reachable object 의 graph 의 capture. 매 retainers 의 trace. - **Allocation timeline**: 매 시간 에 따라 allocate 된 object 의 추적. 매 churn 의 detection. - **Allocation sampling**: 매 lightweight (5% 이하 overhead). 매 production 의 OK. ### 매 V8 GC structure - **Young generation (Scavenger)**: 매 fast minor GC. 매 semi-space copying. - **Old generation (Mark-Sweep-Compact)**: 매 incremental mark + concurrent sweep. - **Code space, Map space, Large object space**: 매 separate region. ### 매 응용 1. Memory leak hunt — DOM detached node 의 detection. 2. Bundle size 의 runtime impact analysis. 3. Closure-induced retention 의 audit. 4. Listener leak 의 trace. ## 💻 패턴 ### Programmatic snapshot (Node.js / Electron) ```javascript const v8 = require('v8'); const fs = require('fs'); function takeHeapSnapshot(label) { const path = `./heap-${label}-${Date.now()}.heapsnapshot`; const stream = v8.getHeapSnapshot(); stream.pipe(fs.createWriteStream(path)); return path; } // Usage: take 3 snapshots, compare in DevTools takeHeapSnapshot('baseline'); runWorkload(); global.gc?.(); takeHeapSnapshot('after-gc'); ``` ### Detached DOM detection ```javascript // In Console / Snapshot Comparison view // Filter by "Detached HTMLDivElement" // → retainer chain shows the closure / array holding it class LeakyComponent { constructor() { this.handlers = []; document.addEventListener('scroll', this.onScroll); // leak: never removed } onScroll = () => { /* ... */ } } // Fix: store bound ref, removeEventListener in destroy() ``` ### CDP (Chrome DevTools Protocol) automation ```javascript const CDP = require('chrome-remote-interface'); async function profileHeap() { const client = await CDP(); const { HeapProfiler } = client; await HeapProfiler.enable(); await HeapProfiler.collectGarbage(); const chunks = []; HeapProfiler.on('addHeapSnapshotChunk', ({ chunk }) => chunks.push(chunk)); await HeapProfiler.takeHeapSnapshot({ reportProgress: false }); return chunks.join(''); } ``` ### Sampling allocation profiler ```javascript // V8 11+, ~512KB sample interval const profiler = require('v8-profiler-next'); profiler.startSamplingHeapProfiler(512 * 1024, 64); // ... workload ... const profile = profiler.stopSamplingHeapProfiler(); fs.writeFileSync('alloc.heapprofile', JSON.stringify(profile)); ``` ### --inspect + automated diff ```bash node --inspect=0.0.0.0:9229 server.js # Connect Chrome DevTools → Memory → take snapshot # Run load test → take 2nd snapshot # Comparison view → filter "Delta > 0" + sort by Retained Size ``` ### Constructor filter (find specific class instances) ```javascript // In DevTools heap viewer // class: SomeBigBuffer → see all live instances + retainers // Common pattern: a Map / Set holding stale references ``` ### --max-old-space-size tuning ```bash node --max-old-space-size=4096 --expose-gc app.js # or for Chrome: chrome --js-flags="--max-old-space-size=8192" ``` ## 매 결정 기준 | 상황 | Approach | |---|---| | Production leak (live) | Sampling allocation profiler (low overhead) | | Dev / staging deep dive | Full heap snapshot diff (3-snapshot technique) | | Allocation hotspot | Allocation timeline | | Specific class instances | Constructor filter | | CI regression check | Programmatic `v8.getHeapSnapshot()` + threshold | **기본값**: 매 3-snapshot technique (baseline → workload → after-gc → diff). ## 🔗 Graph - 부모: [[V8 Engine]] · [[Chrome DevTools 메모리 프로파일링|Chrome DevTools]] - 변형: [[Electron V8 Memory Cage]] - 응용: [[Memory Leak Detection]] · [[Performance Optimization]] - Adjacent: [[Garbage Collection]] ## 🤖 LLM 활용 **언제**: 매 leak 의 reproducibility 의 OK 의 case. 매 retainer chain 의 interpretation 의 LLM 의 강점. **언제 X**: 매 production 의 large heap (> 4GB) 의 snapshot 의 capture 의 비용 (multi-second pause). ## ❌ 안티패턴 - **Snapshot before GC X**: 매 항상 `--expose-gc` + `global.gc()` 후 snapshot. 매 noise 의 reduction. - **Single snapshot 의존**: 매 항상 diff. 매 absolute size 의 less informative. - **Closures의 underestimate**: 매 arrow function 의 lexical scope 의 모든 outer var 의 retain. ## 🧪 검증 / 중복 - Verified (V8 docs, Chrome DevTools docs, Node.js v8 module). - 신뢰도 A. ## 🕓 Changelog | 날짜 | 변경 | |---|---| | 2026-05-08 | Phase 1 | | 2026-05-10 | Manual cleanup — V8 heap snapshot / leak hunting workflow |