◆Error Codes Wiki

Browser Memory Leak — Detecting and Fixing Web App Memory Leaks

Errorweb development

Overview

Detect and fix browser memory leaks in web applications causing tabs to slow down and eventually crash, using Chrome DevTools Memory profiler.

Key Details

  • Memory leaks in web apps cause increasing memory usage over time, eventually crashing the tab
  • Common leak sources: detached DOM nodes, event listeners not removed, closures retaining references
  • Chrome DevTools Memory tab provides heap snapshots and allocation timelines
  • Single Page Applications (SPAs) are more prone to leaks due to long-running page sessions
  • Comparison between two heap snapshots reveals objects that grew (potential leak)

Common Causes

  • Event listeners added but never removed (especially on route/component changes in SPAs)
  • References to detached DOM elements preventing garbage collection
  • setInterval or setTimeout callbacks retaining references to large objects
  • Global variable accumulation storing data that should be component-scoped
  • Closures capturing variables from outer scope, preventing their garbage collection

Steps

  1. 1Take a heap snapshot: Chrome DevTools > Memory > Heap Snapshot > take snapshot
  2. 2Reproduce the leak: perform the action that leaks memory several times
  3. 3Take another snapshot and compare: select 'Comparison' view between snapshot 1 and 2
  4. 4Look for growing object counts — especially Detached HTMLElement entries
  5. 5Use Allocation instrumentation on timeline to see which code allocates non-garbage-collected objects
  6. 6Fix: remove event listeners in cleanup, clear intervals, use WeakRef/WeakMap for caches

Tags

memory-leakheap-snapshotdevtoolsjavascriptperformance

Related Items

browser-javascript-heap-out-of-memorybrowser-tab-crash-aw-snap

More in Web Development

browser-cors-error-explainedBrowser CORS Error Explained — Cross-Origin Request Blocked
Warning
browser-websocket-errorsBrowser WebSocket Errors — Connection Failed, Closed & Protocol Errors
Warning
browser-indexeddb-errorsBrowser IndexedDB Errors — Quota Exceeded, Blocked & Corruption
Warning
browser-localstorage-quota-exceededBrowser localStorage Quota Exceeded — Storage Limit & Alternatives
Warning
browser-service-worker-errorsBrowser Service Worker Errors — Registration, Cache & Update Failures
Warning
browser-webgl-context-lostBrowser WebGL Context Lost — GPU Rendering Failure in Browser
Warning

Frequently Asked Questions

Open Chrome Task Manager (Shift+Esc), watch the tab's memory usage over time while using the app. If it grows continuously without plateau, there is a leak. Normal apps reach a stable memory level.