Analyze the JS Heap and detect Memory Leaks
summary
Shows how to find real leaks: use Chrome DevTools Memory tab to take a heap snapshot, inspect retain size and the retainers list to see what keeps objects alive, trigger GC manually, and watch the Performance Monitor for a stair‑step JS heap, DOM nodes and event listeners rising (examples show tens of MBs, thousands of nodes, hundreds of listeners). Demonstrates Edge’s detached elements tool to map detached DOM nodes to the source and fixes a leak by storing the handler and calling removeEventListener.
AI-written summary · about
chapters (28)
- 0:00intro
- 0:22preamble
- 1:04about julian
- 2:00immutability
- 2:23dom nodes
- 2:37composition layers
- 3:15inspect dom & javascript memory
- 3:30birdseye view
- 4:56memory heap
- 5:47object sizes
- 7:00inspect dom & javascript memory
- 9:38demo 1
- 11:42what consumes memory
- 12:05composition layers
- 13:23layer inspection
- 14:28demo 2
- 16:43memory leaks
- 18:55console.log
- 19:37global variables
- 20:13left over callbacks / subscriptions
- 21:12dom references
- 21:49how to detect memory leaks?
- 22:07detect memory leaks
- 23:09don't forget to trigger GC
- 23:43in-depth analysis - detect memory leaks
- 24:33detached elements tools
- 26:56demo 3
- 34:12thanks for your time!
related talks
20mMemory Leaks and the Havoc They Wreak
19mUnderstand, find, prevent and fix memory leaks in JavaScript
53mPlugging Memory Leaks With The Chrome Dev Tools
22mThe Hitchhiker's Guide to All Things Memory in JS
30mMemory Don't Forget To Take Out The Garbage
31mJavaScript memory management: Visual Guide
24mTrash Talk - Understanding Memory Management
21mLive and let die: Untangling the web of objects