2nd/10_Wiki/Topics/AI_and_ML/Chrome DevTools 메모리 프로파일링.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-devtools-memory-profiling	Chrome DevTools Memory Profiling	10_Wiki/Topics	verified	self	heap snapshot memory leak detection retaining path allocation timeline V8 GC detached DOM	none	A	0.93	applied	chrome-devtools memory-profiling heap-snapshot memory-leak v8 gc web-performance browser		2026-05-10	pending	language framework JS / browser 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)

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

// 매 ❌ 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)

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

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

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)

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)

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

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

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

Headless leak detection (Puppeteer)

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