Browser JavaScript Heap Out of Memory — Page Crash & Performance

Overview

Fix JavaScript heap out-of-memory errors causing browser tab crashes, 'Aw Snap' pages, and severe slowdowns from memory leaks in web applications.

Key Details

• Each browser tab has a JavaScript heap with a maximum size (Chrome: ~4GB on 64-bit systems)
• Memory leaks in JavaScript occur when references prevent garbage collection
• Common leak sources: event listeners not removed, closures holding large objects, DOM detached nodes
• DevTools Memory tab provides heap snapshots and allocation tracking
• Long-running single-page applications are most susceptible to memory leaks

Common Causes

• Memory leak: objects accumulating over time and never garbage collected
• Detached DOM nodes: elements removed from DOM but still referenced in JavaScript
• Event listeners not removed: addEventListener without corresponding removeEventListener
• Large data sets loaded and retained in memory without pagination
• Closures capturing and holding references to large objects

Steps

1. 1Open DevTools > Memory tab > Take heap snapshot to see memory usage
2. 2Compare two snapshots over time to find growing object counts (leak indicators)
3. 3Use Performance Monitor: DevTools > More tools > Performance Monitor to watch JS heap size
4. 4Check for detached DOM nodes: heap snapshot > filter by 'Detached'
5. 5For users: refresh the tab periodically to reset JavaScript memory

Tags

More in Web Development

Frequently Asked Questions