Chrome DevTools Memory Profiling (메모리 분석 및 성능 최적화)

📌 한 줄 통찰 (The Karpathy Summary)

"보이지 않는 메모리 누수를 가시화하라" — 브라우저의 힙 스냅샷과 타임라인 기록을 통해 자바스크립트 객체의 할당 및 해제 과정을 추적하여 웹 애플리케이션의 메모리 효율성을 극대화하는 진단 도구.

추출된 패턴: 메모리 점유율이 지속적으로 우상향하는 '메모리 누수(Memory Leak)' 패턴을 식별하고, 해제되지 않은 참조 관계(Retainer Tree)를 찾아내는 진단 패턴.
세부 내용:
- Heap Snapshot: 특정 시점의 메모리 사용 현황을 캡처하여 어떤 객체가 가장 많은 용량을 차지하는지 분석.
- Allocation Instrumentation on Timeline: 시간에 따른 메모리 할당 현황을 기록하여 특정 사용자 동작(클릭 등) 시 메모리가 비정상적으로 급증하는지 확인.
- Detached DOM Nodes: 화면에서 사라졌지만 가비지 컬렉터(GC)에 의해 수거되지 못한 DOM 노드를 탐지.
- Shallow Size vs Retained Size: 객체 자체의 크기와 해당 객체가 유지하고 있는 다른 객체들의 합계 크기를 구분하여 병목 지점 파악.

과거 데이터와의 충돌: 단순 '새로고침'으로 해결하던 방식에서, SPA(Single Page Application) 환경의 장기 생존 메모리 관리로 최적화 패러다임 전환.
정책 변화: Antigravity 프로젝트의 웹 대시보드 성능 가이드라인에 따라 5분 이상 미사용 시 유휴 메모리 강제 해제 로직 검증에 활용.

Parent: 10_Wiki/💡 Topics/AI
Related: Garbage-Collection, Reflow-Repaint, V8-Engine
Merged Source: 10_Wiki/Topics/AI/Chrome DevTools 메모리 분석 및 성능 최적화.md