2nd/10_Wiki/Topics/DevOps_and_Security/Chrome V8 Heap Analysis.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-chrome-v8-heap-analysis	Chrome V8 Heap Analysis	10_Wiki/Topics	verified	self	V8 Heap Snapshot Chrome DevTools Memory Heap Profiler	none	A	0.9	applied	v8 chrome heap debugging performance		2026-05-10	pending	language framework javascript 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)

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

// 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

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

// 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

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)

// In DevTools heap viewer
// class: SomeBigBuffer  → see all live instances + retainers
// Common pattern: a Map / Set holding stale references

--max-old-space-size tuning

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 Memory Profiling
• 변형: 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