← Performance Optimization JavaScript Security (XSS, CSRF, CORS) →

Memory Leaks in JavaScript

Memory Management: Understand how memory leaks occur and how to prevent them

1. Common Causes of Memory Leaks

Main Causes:

Unreleased event listeners
Detached DOM references
Closures holding references
Timers and intervals
Global variables accumulation
Caches without limits

Symptoms:

Increasing memory usage over time
Application slowdown
Browser crashes
High CPU usage
Garbage collector working overtime

Example 1: Forgotten Event Listeners

JavaScript Editor

// Memory Leak: Forgotten Event Listeners
                class LeakyComponent {
                constructor() {
                    this.data = new Array(10000).fill('data');
                    this.handleClick = this.handleClick.bind(this);
                    
                    // Adding event listener but never removing it
                    document.addEventListener('click', this.handleClick);
                }
                
                handleClick() {
                    console.log('Clicked! Data length:', this.data.length);
                }
                
                // No cleanup method - this causes memory leak!
                }

// Test: Creating and destroying components
                function testLeak() {
                const components = [];
                
                console.log('Creating 100 components with event listeners...');
                for (let i = 0; i < 100; i++) {
                    components.push(new LeakyComponent());
                }
                
                console.log('Destroying references but listeners remain...');
                components.length = 0; // Remove references
                
                // Even though components are gone, event listeners still hold memory
                console.log('Memory leak: Event listeners still attached to document');
                
                // Force garbage collection (if available)
                if (global.gc) {
                    global.gc();
                }
                
                console.log('Check Memory tab in DevTools to see retained memory');
                }

testLeak();

Fixed Version with Cleanup

JavaScript Editor

// Fixed: Proper Event Listener Cleanup
                class FixedComponent {
                constructor() {
                    this.data = new Array(10000).fill('data');
                    this.handleClick = this.handleClick.bind(this);
                    
                    document.addEventListener('click', this.handleClick);
                }
                
                handleClick() {
                    console.log('Clicked! Data length:', this.data.length);
                }
                
                // Crucial: Cleanup method
                destroy() {
                    document.removeEventListener('click', this.handleClick);
                    this.data = null; // Help GC
                }
                }

// Test with proper cleanup
                function testFixed() {
                const components = [];
                
                console.log('Creating 100 components...');
                for (let i = 0; i < 100; i++) {
                    components.push(new FixedComponent());
                }
                
                console.log('Properly destroying components...');
                components.forEach(component => component.destroy());
                components.length = 0;
                
                console.log('No memory leak: All event listeners removed');
                }

testFixed();

2. Detached DOM Tree Leaks

When DOM elements are removed from the document but still referenced in JavaScript.

Example 2: Detached DOM References

JavaScript Editor

// Memory Leak: Detached DOM References
                class LeakyDOMManager {
                constructor() {
                    this.detachedElements = [];
                }
                
                createAndDetach() {
                    // Create element
                    const element = document.createElement('div');
                    element.innerHTML = '<p>Large content here...</p>';
                    element.style.display = 'none';
                    
                    // Add lots of data to element
                    element.bigData = new Array(1000000).fill('x').join('');
                    
                    // Add to document briefly
                    document.body.appendChild(element);
                    
                    // Remove from document but keep reference
                    document.body.removeChild(element);
                    
                    // Store reference - THIS CAUSES MEMORY LEAK!
                    this.detachedElements.push(element);
                    
                    return element;
                }
                
                // Method that creates many detached elements
                createMany() {
                    console.log('Creating 100 detached DOM elements...');
                    for (let i = 0; i < 100; i++) {
                    this.createAndDetach();
                    }
                    console.log(`Stored ${this.detachedElements.length} detached elements`);
                }
                }

// Test
                const manager = new LeakyDOMManager();
                manager.createMany();

// Even though elements are not in DOM, they're still in memory
                console.log('Memory leak: Detached DOM elements still referenced');

// To see the leak in DevTools:
                // 1. Take heap snapshot
                // 2. Look for "Detached" in summary
                console.log('Check "Detached HTMLElement" in heap snapshot');

Fixed: Release DOM References

JavaScript Editor

// Fixed: Proper DOM Reference Management
                class FixedDOMManager {
                constructor() {
                    this.detachedElements = [];
                }
                
                createAndDetach() {
                    const element = document.createElement('div');
                    element.innerHTML = '<p>Large content here...</p>';
                    element.style.display = 'none';
                    element.bigData = new Array(1000000).fill('x').join('');
                    
                    document.body.appendChild(element);
                    document.body.removeChild(element);
                    
                    this.detachedElements.push(element);
                    
                    return element;
                }
                
                createMany() {
                    console.log('Creating 100 detached DOM elements...');
                    for (let i = 0; i < 100; i++) {
                    this.createAndDetach();
                    }
                    console.log(`Stored ${this.detachedElements.length} detached elements`);
                }
                
                // Crucial: Cleanup method
                cleanup() {
                    console.log('Cleaning up detached elements...');
                    
                    // Remove references to allow garbage collection
                    this.detachedElements.forEach(element => {
                    // Remove any custom properties
                    delete element.bigData;
                    });
                    
                    // Clear the array
                    this.detachedElements.length = 0;
                    
                    console.log('All detached element references released');
                }
                }

// Test with cleanup
                const fixedManager = new FixedDOMManager();
                fixedManager.createMany();

// Later, when done with elements
                fixedManager.cleanup();

console.log('No memory leak: References properly released');

3. Closure-related Leaks

When closures capture more variables than needed, preventing garbage collection.

Example 3: Closure Holding Large Objects

JavaScript Editor

// Memory Leak: Closure Holding Unnecessary References
                function createLeakyClosure() {
                const largeObject = new Array(1000000).fill('data');
                const config = { mode: 'test', count: 1000 };
                
                // This closure captures largeObject even though it doesn't use it
                return function() {
                    // Only uses config, but closure captures largeObject too
                    console.log('Config mode:', config.mode);
                    return config.count;
                };
                }

// Test: Creating many closures
                function testClosureLeak() {
                const closures = [];
                
                console.log('Creating 1000 closures...');
                for (let i = 0; i < 1000; i++) {
                    const closure = createLeakyClosure();
                    closures.push(closure);
                    
                    // Each closure holds reference to its own largeObject
                    // Even though closure only needs config
                }
                
                console.log(`Created ${closures.length} closures`);
                console.log('Each closure holds unnecessary largeObject reference');
                
                // Use one closure
                console.log('Result:', closures[0]());
                
                return closures;
                }

const leakyClosures = testClosureLeak();
                console.log('Memory leak: Closures holding unnecessary large objects');

Fixed: Minimize Closure Scope

JavaScript Editor

// Fixed: Only Capture What's Needed
                function createOptimizedClosure() {
                const largeObject = new Array(1000000).fill('data');
                const config = { mode: 'test', count: 1000 };
                
                // Extract only what's needed before creating closure
                const { mode, count } = config;
                
                // Closure only captures what it actually uses
                return function() {
                    console.log('Config mode:', mode);
                    return count;
                };
                
                // largeObject can be garbage collected after function returns
                // because closure doesn't reference it
                }

// Alternative: Factory function pattern
                function createClosureFactory() {
                const config = { mode: 'test', count: 1000 };
                
                return function(data) {
                    // Pass large data as parameter instead of capturing
                    console.log('Config mode:', config.mode, 'Data length:', data.length);
                    return config.count;
                };
                }

// Test optimized closures
                function testOptimizedClosures() {
                const closures = [];
                
                console.log('Creating 1000 optimized closures...');
                for (let i = 0; i < 1000; i++) {
                    const largeObject = new Array(1000000).fill('data');
                    const closure = createOptimizedClosure();
                    closures.push(closure);
                    
                    // largeObject can be garbage collected
                }
                
                console.log(`Created ${closures.length} optimized closures`);
                console.log('Result:', closures[0]());
                
                return closures;
                }

const optimizedClosures = testOptimizedClosures();
                console.log('No memory leak: Closures only capture needed variables');

4. Timer and Interval Leaks

Forgotten timers and intervals continue to run and hold references.

Example 4: Forgotten Intervals

JavaScript Editor

// Memory Leak: Uncleared Intervals
                class LeakyTimerComponent {
                constructor() {
                    this.data = new Array(10000).fill('timer-data');
                    this.count = 0;
                    
                    // Start interval but no way to stop it
                    this.intervalId = setInterval(() => {
                    this.count++;
                    console.log(`Interval tick ${this.count}`);
                    
                    if (this.count >= 5) {
                        // Even if we clear here, component might be destroyed earlier
                        clearInterval(this.intervalId);
                    }
                    }, 1000);
                }
                
                // No cleanup method - interval keeps running
                }

// Test creating and discarding components
                function testTimerLeak() {
                const components = [];
                
                console.log('Creating timer components...');
                for (let i = 0; i < 10; i++) {
                    const component = new LeakyTimerComponent();
                    components.push(component);
                }
                
                console.log('Immediately discarding components...');
                components.length = 0;
                
                // Components are discarded but intervals still run
                // Each interval callback tries to access 'this.data'
                // This keeps components in memory
                
                console.log('Memory leak: Intervals still running, holding component references');
                
                // Wait to see interval logs
                setTimeout(() => {
                    console.log('Check console - intervals may still be logging!');
                }, 3000);
                }

testTimerLeak();

Fixed: Proper Timer Management

JavaScript Editor

// Fixed: Manage Timers with Cleanup
                class FixedTimerComponent {
                constructor() {
                    this.data = new Array(10000).fill('timer-data');
                    this.count = 0;
                    this.isActive = true;
                    
                    this.intervalId = setInterval(() => {
                    if (!this.isActive) {
                        this.cleanup();
                        return;
                    }
                    
                    this.count++;
                    console.log(`Interval tick ${this.count}`);
                    }, 1000);
                }
                
                // Public cleanup method
                destroy() {
                    this.isActive = false;
                    this.cleanup();
                }
                
                // Private cleanup
                cleanup() {
                    if (this.intervalId) {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                    }
                    
                    // Release large data
                    this.data = null;
                }
                }

// Better: Use WeakRef to avoid preventing garbage collection
                class SafeTimerComponent {
                constructor() {
                    this.data = new Array(10000).fill('timer-data');
                    this.weakRef = new WeakRef(this);
                    
                    this.intervalId = setInterval(() => {
                    const instance = this.weakRef.deref();
                    if (!instance) {
                        // Component was garbage collected
                        clearInterval(this.intervalId);
                        return;
                    }
                    
                    console.log('Timer component still alive');
                    }, 1000);
                }
                
                destroy() {
                    clearInterval(this.intervalId);
                    this.data = null;
                }
                }

// Test with cleanup
                function testFixedTimers() {
                const components = [];
                
                console.log('Creating timer components with cleanup...');
                for (let i = 0; i < 10; i++) {
                    const component = new FixedTimerComponent();
                    components.push(component);
                }
                
                console.log('Properly destroying components...');
                components.forEach(component => component.destroy());
                components.length = 0;
                
                console.log('No memory leak: All timers cleared');
                }

testFixedTimers();

5. Memory Leak Detection Tools

Heap Snapshot Analysis

JavaScript Editor

// Memory Leak Detection Utility
                class MemoryLeakDetector {
                constructor() {
                    this.snapshots = [];
                    this.leakThreshold = 1024 * 1024; // 1MB
                }
                
                takeSnapshot(name) {
                    if (typeof window.performance !== 'undefined' && 
                        window.performance.memory) {
                    const memory = window.performance.memory;
                    const snapshot = {
                        name,
                        timestamp: Date.now(),
                        usedJSHeapSize: memory.usedJSHeapSize,
                        totalJSHeapSize: memory.totalJSHeapSize,
                        jsHeapSizeLimit: memory.jsHeapSizeLimit
                    };
                    
                    this.snapshots.push(snapshot);
                    return snapshot;
                    }
                    return null;
                }
                
                compareSnapshots() {
                    if (this.snapshots.length < 2) {
                    console.warn('Need at least 2 snapshots to compare');
                    return;
                    }
                    
                    const recent = this.snapshots[this.snapshots.length - 1];
                    const previous = this.snapshots[this.snapshots.length - 2];
                    
                    const increase = recent.usedJSHeapSize - previous.usedJSHeapSize;
                    const percentIncrease = (increase / previous.usedJSHeapSize) * 100;
                    
                    console.log(`=== Memory Comparison: ${previous.name} -> ${recent.name} ===`);
                    console.log(`Memory increase: ${this.formatBytes(increase)} (${percentIncrease.toFixed(2)}%)`);
                    console.log(`Current memory: ${this.formatBytes(recent.usedJSHeapSize)}`);
                    
                    if (increase > this.leakThreshold) {
                    console.warn(`⚠️ Potential memory leak detected! Increase > ${this.formatBytes(this.leakThreshold)}`);
                    }
                }
                
                formatBytes(bytes) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                }
                
                clear() {
                    this.snapshots = [];
                }
                }

// Example: Detect leaks in a component
                class TestComponent {
                constructor() {
                    this.data = [];
                    this.listeners = [];
                }
                
                addData(amount) {
                    for (let i = 0; i < amount; i++) {
                    this.data.push(new Array(1000).fill('x').join(''));
                    }
                }
                
                addLeakyListener() {
                    const handler = () => console.log('click');
                    document.addEventListener('click', handler);
                    this.listeners.push(handler);
                }
                
                cleanup() {
                    this.listeners.forEach(handler => {
                    document.removeEventListener('click', handler);
                    });
                    this.data = null;
                }
                }

// Test memory leak detection
                async function testLeakDetection() {
                const detector = new MemoryLeakDetector();
                const components = [];
                
                // Initial snapshot
                detector.takeSnapshot('initial');
                
                // Create components (potential leak)
                console.log('Creating components...');
                for (let i = 0; i < 100; i++) {
                    const component = new TestComponent();
                    component.addData(10);
                    component.addLeakyListener();
                    components.push(component);
                }
                
                await new Promise(resolve => setTimeout(resolve, 100));
                detector.takeSnapshot('after-creation');
                
                // Remove references without cleanup
                console.log('Discarding components without cleanup...');
                components.length = 0;
                
                await new Promise(resolve => setTimeout(resolve, 100));
                detector.takeSnapshot('after-discard');
                
                // Force garbage collection
                if (global.gc) {
                    global.gc();
                    await new Promise(resolve => setTimeout(resolve, 100));
                    detector.takeSnapshot('after-gc');
                }
                
                // Compare snapshots
                detector.compareSnapshots();
                
                // Check if memory was reclaimed
                const snapshots = detector.snapshots;
                if (snapshots.length >= 3) {
                    const initial = snapshots[0].usedJSHeapSize;
                    const afterGc = snapshots[snapshots.length - 1].usedJSHeapSize;
                    const difference = afterGc - initial;
                    
                    if (difference > detector.leakThreshold) {
                    console.error(`❌ Memory leak confirmed! Not reclaimed: ${detector.formatBytes(difference)}`);
                    } else {
                    console.log(`✅ Memory properly reclaimed`);
                    }
                }
                }

testLeakDetection();

6. Prevention Strategies

Best Practices:

Always remove event listeners
Clear timers and intervals
Use WeakMap/WeakSet for caches
Avoid global variables
Implement cleanup methods
Monitor memory usage

Tools & Techniques:

Chrome DevTools Heap Snapshots
Performance Monitor
Memory tab in DevTools
Weak references
Object pooling
Regular testing

Automatic Cleanup with FinalizationRegistry

JavaScript Editor

// Using FinalizationRegistry for automatic cleanup
                class ResourceManager {
                constructor() {
                    // Registry will notify when objects are garbage collected
                    this.registry = new FinalizationRegistry((heldValue) => {
                    console.log(`Cleaning up resource for: ${heldValue}`);
                    this.cleanupResource(heldValue);
                    });
                    
                    this.resources = new Map();
                }
                
                registerResource(key, resource, cleanupFn) {
                    this.resources.set(key, { resource, cleanupFn });
                    
                    // Register for cleanup when resource is garbage collected
                    this.registry.register(resource, key);
                    
                    return resource;
                }
                
                cleanupResource(key) {
                    const resourceInfo = this.resources.get(key);
                    if (resourceInfo && resourceInfo.cleanupFn) {
                    resourceInfo.cleanupFn();
                    this.resources.delete(key);
                    }
                }
                
                unregisterResource(key) {
                    const resourceInfo = this.resources.get(key);
                    if (resourceInfo) {
                    this.registry.unregister(resourceInfo.resource);
                    this.resources.delete(key);
                    }
                }
                }

// Example usage
                const manager = new ResourceManager();

// Test
                const resource1 = createExpensiveResource('test-1');
                const resource2 = createExpensiveResource('test-2');

// Discard resources
                console.log('Discarding resources...');
                resource1 = null;
                resource2 = null;

// Force GC to see cleanup (in Node.js with --expose-gc flag)
                if (global.gc) {
                setTimeout(() => {
                    global.gc();
                    console.log('Garbage collection triggered');
                }, 1000);
                }

console.log('FinalizationRegistry will auto-clean when resources are GCed');

Memory Leak Prevention Checklist:

✅ Always implement cleanup/destroy methods
✅ Use Weak references when appropriate
✅ Monitor memory in production
✅ Test with heap snapshots regularly
✅ Limit cache sizes and implement TTL
✅ Remove all event listeners on component unmount
✅ Clear all timers and intervals
✅ Avoid unnecessary closures capturing large objects

← Performance Optimization JavaScript Security (XSS, CSRF, CORS) →

JavaScript Tutorial

Memory Leaks in JavaScript

1. Common Causes of Memory Leaks

Main Causes:

Symptoms:

Example 1: Forgotten Event Listeners

Fixed Version with Cleanup

2. Detached DOM Tree Leaks

Example 2: Detached DOM References

Fixed: Release DOM References

3. Closure-related Leaks

Example 3: Closure Holding Large Objects

Fixed: Minimize Closure Scope

4. Timer and Interval Leaks

Example 4: Forgotten Intervals

Fixed: Proper Timer Management

5. Memory Leak Detection Tools

Heap Snapshot Analysis

6. Prevention Strategies

Best Practices:

Tools & Techniques:

Automatic Cleanup with FinalizationRegistry

Memory Leak Prevention Checklist:

Follow Us

Our Tools

Our Company

Special Tools