Memory Leak Prevention: Traps and Solutions in Closure Usage

What are Memory Leaks?

Imagine you're managing a warehouse. As business grows, you keep adding goods to the warehouse. If you only remember to put goods in but forget to regularly clean up old goods that are no longer needed, the warehouse will eventually be filled to capacity, leaving no room for new goods. Memory leaks in JavaScript are like this scenario—programs continuously allocate memory, but some memory that is no longer needed cannot be reclaimed by the garbage collection mechanism, leading to decreasing available memory and ultimately affecting program performance or even causing crashes.

While closures are powerful, if used improperly, they can easily become a source of memory leaks. This is because closures maintain references to variables in their outer scope, and even if these variables are logically no longer needed, as long as the closure exists, the memory occupied by these variables cannot be released.

JavaScript's Garbage Collection Mechanism

Before understanding memory leaks, we need to understand how JavaScript manages memory.

Mark-and-Sweep Algorithm

JavaScript primarily uses the "mark-and-sweep" algorithm for garbage collection:

// Basic principle of garbage collection
function demonstrateGC() {
  // This object is within the function scope
  let temporaryData = {
    largeArray: new Array(1000000).fill("data"),
    timestamp: Date.now(),
  };

  // Use data
  console.log(temporaryData.timestamp);

  // After function ends, if there are no other references
  // temporaryData will be marked as reclaimable
}

demonstrateGC();
// Function execution finished, temporaryData loses all references
// In next garbage collection, its memory will be released

Reference Counting Issues

Early JavaScript engines used reference counting, but this method has circular reference problems:

// Circular reference example (causes memory leaks in older browsers)
function createCircularReference() {
  const objA = {};
  const objB = {};

  // Create circular reference
  objA.ref = objB;
  objB.ref = objA;

  // Even after function ends, due to mutual references
  // reference count will never be 0
  // (Modern engines have solved this problem)
}

Modern JavaScript engines have solved the circular reference problem through the mark-and-sweep algorithm, but memory leaks caused by closures still require developer attention.

Common Memory Leaks Caused by Closures

Accidentally Retaining Large Object References

Closures retain references to all variables in their outer scope, even if only one is used:

// Problematic code
function createProcessor() {
  // A large data object
  const largeData = {
    users: new Array(100000).fill({ name: "User", data: "x".repeat(1000) }),
    config: {
      /*大量配置 */
    },
    cache: new Map(),
  };

  // Suppose we only need one small property
  const configValue = largeData.config.someValue;

  // The returned closure will retain reference to entire largeData
  return function process(item) {
    // Even if only configValue is used here
    // entire largeData object cannot be reclaimed
    return item + configValue;
  };
}

const processor = createProcessor();
// Now memory holds entire large data object

// Solution: only keep needed data
function createProcessorFixed() {
  const largeData = {
    users: new Array(100000).fill({ name: "User", data: "x".repeat(1000) }),
    config: { someValue: 42 },
    cache: new Map(),
  };

  // Extract needed values
  const configValue = largeData.config.someValue;

  // largeData can be reclaimed after function ends
  // Closure only retains configValue
  return function process(item) {
    return item + configValue;
  };
}

Closures in Timers

Timers are one of the common causes of memory leaks:

// Problematic code
function startPolling(userData) {
  // userData might be a large object
  const data = {
    user: userData,
    cache: new Map(),
    history: [],
  };

  // Timer creates closure, holding data reference
  setInterval(function () {
    // Even if data is no longer needed, it will always exist
    console.log("Polling...");
    data.history.push(Date.now());
  }, 1000);

  // No method to clear timer
  // data will never be reclaimed
}

// Solution: return cleanup function
function startPollingFixed(userData) {
  const data = {
    user: userData,
    cache: new Map(),
    history: [],
  };

  const timerId = setInterval(function () {
    console.log("Polling...");
    data.history.push(Date.now());
  }, 1000);

  // Return cleanup function
  return function cleanup() {
    clearInterval(timerId);
    // Help garbage collection
    data.history = [];
    data.cache.clear();
  };
}

// Use
const cleanup = startPollingFixed({ id: 1, name: "John" });

// Clean up when no longer needed
setTimeout(() => {
  cleanup(); // Release resources
}, 10000);

Event Listener Leaks

Uncleared event listeners are the most common source of memory leaks:

// Problematic code
class UserProfile {
  constructor(userId) {
    this.userId = userId;
    this.data = new Array(10000).fill("user data");

    // Create event listener, forming closure
    document.addEventListener("click", () => {
      // This closure holds reference to entire this
      // Even if UserProfile instance is "destroyed"
      // It still cannot be reclaimed
      console.log(`User ${this.userId} clicked something`);
      console.log(this.data.length);
    });
  }
}

// Create instance
let profile = new UserProfile(123);

// Even if reference is deleted
profile = null;
// UserProfile instance still cannot be reclaimed because event listener is still there

// Solution 1: Save listener reference and remove at appropriate time
class UserProfileFixed {
  constructor(userId) {
    this.userId = userId;
    this.data = new Array(10000).fill("user data");

    // Save listener reference
    this.handleClick = () => {
      console.log(`User ${this.userId} clicked`);
    };

    document.addEventListener("click", this.handleClick);
  }

  destroy() {
    // Clean up event listener
    document.removeEventListener("click", this.handleClick);

    // Clean up data
    this.data = null;
  }
}

// Use
const profileFixed = new UserProfileFixed(123);

// Call destroy when no longer needed
profileFixed.destroy();

// Solution 2: Use AbortController
class UserProfileBetter {
  constructor(userId) {
    this.userId = userId;
    this.data = new Array(10000).fill("user data");
    this.abortController = new AbortController();

    document.addEventListener(
      "click",
      () => {
        console.log(`User ${this.userId} clicked`);
      },
      { signal: this.abortController.signal }
    );
  }

  destroy() {
    // Remove all listeners using this signal at once
    this.abortController.abort();
    this.data = null;
  }
}

DOM Reference Leaks

Maintaining references to deleted DOM elements prevents their reclamation:

// Problematic code
class DataTable {
  constructor() {
    this.rows = [];
    this.cellCache = new Map();
  }

  addRow(data) {
    const row = document.createElement("tr");
    const cell = document.createElement("td");
    cell.textContent = data;
    row.appendChild(cell);

    // Save DOM reference
    this.rows.push(row);
    this.cellCache.set(data, cell);

    document.querySelector("#table").appendChild(row);
  }

  clearTable() {
    // Remove from DOM
    document.querySelector("#table").innerHTML = "";

    // But this.rows and this.cellCache still hold references
    // DOM elements cannot be reclaimed
  }
}

// Solution: clean up all references
class DataTableFixed {
  constructor() {
    this.rows = [];
    this.cellCache = new Map();
  }

  addRow(data) {
    const row = document.createElement("tr");
    const cell = document.createElement("td");
    cell.textContent = data;
    row.appendChild(cell);

    this.rows.push(row);
    this.cellCache.set(data, cell);

    document.querySelector("#table").appendChild(row);
  }

  clearTable() {
    // Clean up DOM
    document.querySelector("#table").innerHTML = "";

    // Clean up all references
    this.rows = [];
    this.cellCache.clear();
  }

  destroy() {
    this.clearTable();
    // Complete cleanup
    this.rows = null;
    this.cellCache = null;
  }
}

Accumulating Data in Closures

Continuously accumulating data in closures without cleanup:

// Problematic code
function createLogger() {
  const logs = [];

  return {
    log(message) {
      // logs array will grow infinitely
      logs.push({
        message,
        timestamp: Date.now(),
        stackTrace: new Error().stack,
      });
    },

    getLogs() {
      return logs;
    },
  };
}

const logger = createLogger();

// After using for a while, logs might become very large
for (let i = 0; i < 1000000; i++) {
  logger.log(`Log message ${i}`);
}

// Solution: limit data size
function createLoggerFixed() {
  const maxLogs = 1000;
  let logs = [];

  return {
    log(message) {
      logs.push({
        message,
        timestamp: Date.now(),
      });

      // Keep within limit
      if (logs.length > maxLogs) {
        logs = logs.slice(-maxLogs);
      }
    },

    getLogs() {
      return [...logs]; // Return copy
    },

    clear() {
      logs = [];
    },
  };
}

// Better solution: use circular buffer
function createLoggerBetter() {
  const maxLogs = 1000;
  const logs = new Array(maxLogs);
  let index = 0;
  let count = 0;

  return {
    log(message) {
      logs[index] = {
        message,
        timestamp: Date.now(),
      };

      index = (index + 1) % maxLogs;
      count = Math.min(count + 1, maxLogs);
    },

    getLogs() {
      // Return actual logs
      const start = count < maxLogs ? 0 : index;
      const result = [];

      for (let i = 0; i < count; i++) {
        result.push(logs[(start + i) % maxLogs]);
      }

      return result;
    },
  };
}

Identifying Memory Leaks

Using Browser Developer Tools

Modern browsers provide powerful memory analysis tools:

// Create a scenario that leaks
class LeakyComponent {
  constructor(id) {
    this.id = id;
    this.data = new Array(100000).fill(`data for ${id}`);

    // Leak point: event listener
    window.addEventListener("resize", () => {
      console.log(`Component ${this.id} handling resize`);
    });
  }
}

// Test memory leaks
let components = [];

function addComponents() {
  for (let i = 0; i < 100; i++) {
    components.push(new LeakyComponent(i));
  }
}

function clearComponents() {
  components = [];
  // Even after clearing references, memory won't be released due to event listeners
}

// In browser console:
// 1. Open Performance tab
// 2. Start recording
// 3. Call addComponents() several times
// 4. Call clearComponents()
// 5. Force garbage collection
// 6. Check if memory decreased

// Use Memory tab:
// 1. Take heap snapshot
// 2. Execute operations
// 3. Take another heap snapshot
// 4. Compare two snapshots

Performance API Monitoring

function monitorMemory() {
  if (performance.memory) {
    return {
      usedJSHeapSize: performance.memory.usedJSHeapSize,
      totalJSHeapSize: performance.memory.totalJSHeapSize,
      jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,

      getUsagePercentage() {
        return ((this.usedJSHeapSize / this.jsHeapSizeLimit) * 100).toFixed(2);
      },
    };
  }

  return null;
}

// Regularly check memory usage
function startMemoryMonitoring(interval = 5000) {
  return setInterval(() => {
    const memory = monitorMemory();
    if (memory) {
      console.log(`Memory usage: ${memory.getUsagePercentage()}%`);
      console.log(`Used: ${(memory.usedJSHeapSize / 1048576).toFixed(2)} MB`);

      // Set warning threshold
      if (parseFloat(memory.getUsagePercentage()) > 80) {
        console.warn("High memory usage detected!");
      }
    }
  }, interval);
}

// Use
const monitoringId = startMemoryMonitoring();

// Stop monitoring
// clearInterval(monitoringId);

Best Practices for Preventing Memory Leaks

Clean Up Timers and Listeners Promptly

class Component {
  constructor() {
    this.timers = [];
    this.listeners = [];
  }

  addTimer(callback, interval) {
    const timerId = setInterval(callback, interval);
    this.timers.push(timerId);
    return timerId;
  }

  addEventListener(element, event, handler) {
    element.addEventListener(event, handler);
    this.listeners.push({ element, event, handler });
  }

  destroy() {
    // Clean up all timers
    this.timers.forEach((timerId) => clearInterval(timerId));
    this.timers = [];

    // Clean up all event listeners
    this.listeners.forEach(({ element, event, handler }) => {
      element.removeEventListener(event, handler);
    });
    this.listeners = [];
  }
}

// Use
const component = new Component();

component.addTimer(() => {
  console.log("Timer tick");
}, 1000);

component.addEventListener(document, "click", () => {
  console.log("Document clicked");
});

// Clean up when no longer needed
component.destroy();

Use WeakMap and WeakSet

WeakMap and WeakSet hold weak references and do not prevent garbage collection:

// Using Map (prevents garbage collection)
const regularCache = new Map();

function processUser(user) {
  if (!regularCache.has(user)) {
    // Calculate some expensive operations
    regularCache.set(user, computeExpensiveData(user));
  }

  return regularCache.get(user);
}

// Even if user object is no longer used, due to Map's strong reference
// It cannot be reclaimed

// Using WeakMap (allows garbage collection)
const weakCache = new WeakMap();

function processUserBetter(user) {
  if (!weakCache.has(user)) {
    weakCache.set(user, computeExpensiveData(user));
  }

  return weakCache.get(user);
}

// When user object is no longer referenced elsewhere
// WeakMap entries will be automatically cleaned up

function computeExpensiveData(user) {
  return { processed: true, data: user.name };
}

// Practical application: track DOM element metadata
const elementMetadata = new WeakMap();

function attachMetadata(element, data) {
  elementMetadata.set(element, data);
}

function getMetadata(element) {
  return elementMetadata.get(element);
}

// Use
const button = document.createElement("button");
attachMetadata(button, { clicks: 0, created: Date.now() });

// When button is removed from DOM and has no other references
// WeakMap entries will be automatically cleaned up

Avoid Accidental Global Variables

// Problematic code
function createHandler() {
  // Forgot to use let/const/var, created global variable
  largeData = new Array(1000000).fill("data");

  return function () {
    console.log(largeData[0]);
  };
}

const handler = createHandler();
// largeData is now a global variable, will never be reclaimed

// Solution: use strict mode
("use strict");

function createHandlerFixed() {
  // Will throw error in strict mode
  // largeData = new Array(1000000).fill('data');

  const largeData = new Array(1000000).fill("data");

  return function () {
    console.log(largeData[0]);
  };
}

Manage Caches Reasonably

// Cache with expiration time
class CacheWithExpiration {
  constructor(maxAge = 60000) {
    this.cache = new Map();
    this.maxAge = maxAge;
  }

  set(key, value) {
    this.cache.set(key, {
      value,
      timestamp: Date.now(),
    });
  }

  get(key) {
    const item = this.cache.get(key);

    if (!item) return undefined;

    // Check if expired
    if (Date.now() - item.timestamp > this.maxAge) {
      this.cache.delete(key);
      return undefined;
    }

    return item.value;
  }

  cleanup() {
    const now = Date.now();

    for (const [key, item] of this.cache.entries()) {
      if (now - item.timestamp > this.maxAge) {
        this.cache.delete(key);
      }
    }
  }

  clear() {
    this.cache.clear();
  }
}

// LRU cache implementation
class LRUCache {
  constructor(maxSize = 100) {
    this.maxSize = maxSize;
    this.cache = new Map();
  }

  get(key) {
    if (!this.cache.has(key)) return undefined;

    // Move accessed item to end (most recently used)
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value);

    return value;
  }

  set(key, value) {
    // If key already exists, delete first
    if (this.cache.has(key)) {
      this.cache.delete(key);
    }

    // Add new item
    this.cache.set(key, value);

    // If exceeding max size, delete oldest item
    if (this.cache.size > this.maxSize) {
      const firstKey = this.cache.keys().next().value;
      this.cache.delete(firstKey);
    }
  }

  clear() {
    this.cache.clear();
  }
}

// Use
const lruCache = new LRUCache(1000);

function getData(id) {
  // Check cache first
  let data = lruCache.get(id);

  if (!data) {
    // Cache miss, get data
    data = fetchDataFromServer(id);
    lruCache.set(id, data);
  }

  return data;
}

function fetchDataFromServer(id) {
  return { id, data: "Some data" };
}

Break Circular References

// Problematic code
function createLinkedList() {
  const head = { value: 1 };
  const middle = { value: 2 };
  const tail = { value: 3 };

  head.next = middle;
  middle.next = tail;
  middle.prev = head;
  tail.prev = middle;

  // Create cycle
  tail.next = head;
  head.prev = tail;

  return head;
}

// Modern engines handle this well, but manual cleanup is safer
function destroyLinkedList(head) {
  let current = head;
  const visited = new Set();

  while (current && !visited.has(current)) {
    visited.add(current);
    const next = current.next;

    // Break references
    current.next = null;
    current.prev = null;

    current = next;
  }
}

// Use
let list = createLinkedList();
// ... use linked list ...
destroyLinkedList(list);
list = null;

Testing and Validation

Create Memory Leak Tests

// Memory leak testing tool
class MemoryLeakTest {
  constructor(name) {
    this.name = name;
    this.initialMemory = null;
    this.finalMemory = null;
  }

  async start() {
    // Do garbage collection first (if available)
    if (global.gc) {
      global.gc();
    }

    await this.wait(100);
    this.initialMemory = this.getMemoryUsage();
    console.log(
      `[${this.name}] Initial memory: ${this.formatMemory(this.initialMemory)}`
    );
  }

  async end() {
    // Wait for async operations to complete
    await this.wait(100);

    // Force garbage collection
    if (global.gc) {
      global.gc();
    }

    await this.wait(100);
    this.finalMemory = this.getMemoryUsage();

    const diff = this.finalMemory - this.initialMemory;
    console.log(
      `[${this.name}] Final memory: ${this.formatMemory(this.finalMemory)}`
    );
    console.log(`[${this.name}] Difference: ${this.formatMemory(diff)}`);

    return diff;
  }

  getMemoryUsage() {
    if (performance.memory) {
      return performance.memory.usedJSHeapSize;
    }

    if (process && process.memoryUsage) {
      return process.memoryUsage().heapUsed;
    }

    return 0;
  }

  formatMemory(bytes) {
    return `${(bytes / 1048576).toFixed(2)} MB`;
  }

  wait(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }
}

// Usage example
async function testForMemoryLeaks() {
  const test = new MemoryLeakTest("Event Listener Test");

  await test.start();

  // Execute potentially leaking operations
  for (let i = 0; i < 1000; i++) {
    const element = document.createElement("div");
    element.addEventListener("click", function () {
      console.log("Clicked");
    });
    // Note: didn't remove listener
  }

  const leak = await test.end();

  if (leak > 1048576) {
    // 1 MB
    console.warn("Potential memory leak detected!");
  }
}

Summary

Memory leaks are issues that require special attention in JavaScript development, especially when using closures:

1. Main Causes:

   • Uncleared timers and event listeners
   • Accidentally retained large object references
   • DOM reference leaks
   • Data accumulated in closures

2. Identification Methods:

   • Use browser developer tools' memory analysis
   • Performance API monitoring
   • Regularly take heap snapshots and compare

3. Prevention Measures:

   • Clean up timers and listeners promptly
   • Use WeakMap/WeakSet to handle object mappings
   • Avoid accidental global variables
   • Manage cache size reasonably
   • Break unnecessary references

4. Best Practices:

   • Always provide cleanup/destroy methods
   • Use strict mode to prevent accidental global variables
   • Limit maximum size of data structures
   • Perform memory testing regularly

Understanding and preventing memory leaks is key to writing high-quality, high-performance JavaScript applications. By following the best practices introduced in this article, you can fully utilize the powerful features of closures while avoiding the memory issues they might cause.

---