Browser JavaScript Heap Out of Memory — Page Crash & Performance
About Browser JavaScript Heap Out of Memory
Fix JavaScript heap out-of-memory errors causing browser tab crashes, 'Aw Snap' pages, and severe slowdowns from memory leaks in web applications. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: 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. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: 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. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Open DevTools > Memory tab > Take heap snapshot to see memory usage. Compare two snapshots over time to find growing object counts (leak indicators). Use Performance Monitor: DevTools > More tools > Performance Monitor to watch JS heap size. Check for detached DOM nodes: heap snapshot > filter by 'Detached'. For users: refresh the tab periodically to reset JavaScript memory. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
How do I know if a page has a memory leak?
In DevTools Performance Monitor, watch JS Heap Size over time. If it continuously grows without plateauing, there is a leak.
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
- 1Open DevTools > Memory tab > Take heap snapshot to see memory usage
- 2Compare two snapshots over time to find growing object counts (leak indicators)
- 3Use Performance Monitor: DevTools > More tools > Performance Monitor to watch JS heap size
- 4Check for detached DOM nodes: heap snapshot > filter by 'Detached'
- 5For users: refresh the tab periodically to reset JavaScript memory