🧠 JavaScript Memory Leak Demo

⚠️ Warning: This demo intentionally creates memory leaks! Monitor your browser's memory usage and refresh the page to reset.
Memory Usage:
Calculating...
Active Leaks: 0

🎯 1. Event Listener Memory Leak

Creates DOM elements with event listeners but never removes them. The elements pile up in memory even after being "removed" from DOM.

⏰2. Timer/Interval Memory Leak

Starts timers and intervals but never clears them. These continue running forever, preventing garbage collection.
Active Timers: 0

🌍 3. Global Variable Memory Leak

Creates large objects in global scope that never get cleaned up. Global variables persist for the entire page lifetime.
Global Objects: 0

🔒 4. Closure Memory Leak

Creates closures that hold references to large data structures. The closure keeps the data alive even when it's no longer needed.
Active Closures: 0

📄 5. DOM Reference Memory Leak

Keeps references to removed DOM elements in JavaScript variables. The elements can't be garbage collected while references exist.
Cached DOM Refs: 0

🔧 Memory Management Tools

📊 How to Use Chrome DevTools:

  1. Open DevTools: F12 or Ctrl+Shift+I (Cmd+Opt+I on Mac)
  2. Go to Memory tab: Click on "Memory" tab
  3. Take Heap Snapshot: Select "Heap snapshot" and click "Take snapshot"
  4. Create some leaks: Click the red "Create Leak" buttons above
  5. Take another snapshot: Compare the memory usage
  6. Analyze: Look for increasing object counts and memory usage