原生JavaScript内存泄漏的常见场景、成因、代码示例及正确清理方案问询

Great question! Memory leaks in plain JavaScript are one of those sneaky issues that can make your app slow down over time, or even crash if left unchecked. Let’s walk through the most frequent culprits, why they happen, code examples that cause leaks, and how to fix them.

1. Accidental Global Variables #

Why it happens #

In non-strict mode, JavaScript automatically assigns undeclared variables to the global window object (in browsers). These variables live as long as the page is open, and if they reference large objects or DOM elements, those resources can’t be garbage-collected (GC’d) even when you don’t need them anymore.

Leaking Code Example #

function processData() {
  // Oops! Forgot to declare 'largeDataset' with let/const/var
  largeDataset = fetchHugeAmountOfData(); // Gets attached to window.largeDataset
}

processData();
// Even after processData finishes, window.largeDataset still holds the big data

Fix #

• Use strict mode ('use strict') at the top of your scripts or modules—it throws an error if you try to assign to an undeclared variable, preventing accidental globals.
• Explicitly declare variables with let/const to keep them scoped:

'use strict';

function processData() {
  const largeDataset = fetchHugeAmountOfData();
  // When the function ends, largeDataset goes out of scope and can be GC'd
}

2. Forgotten Timers & Interval Callbacks #

Why it happens #

setInterval or setTimeout callbacks that reference external values (like DOM elements or large objects) will keep those values alive even if they’re no longer needed. The timer keeps running, holding onto the reference, so GC can’t clean it up.

Leaking Code Example #

const statsElement = document.getElementById('live-stats');

// Update stats every second
const updateInterval = setInterval(() => {
  statsElement.textContent = getCurrentStats();
}, 1000);

// Later, we remove the stats element from the DOM
statsElement.remove();
// But the interval is still running! It holds a reference to statsElement, so it can't be GC'd

Fix #

Always clear timers when their target is no longer relevant:

const statsElement = document.getElementById('live-stats');
const updateInterval = setInterval(() => {
  statsElement.textContent = getCurrentStats();
}, 1000);

// When removing the element:
statsElement.remove();
clearInterval(updateInterval); // Clean up the interval

3. Uncleaned DOM Element References #

Why it happens #

If you store a DOM element in a variable (like a global or a closure), even after that element is removed from the DOM, the variable’s reference prevents the element from being GC’d. The browser keeps the element in memory because something still points to it.

Leaking Code Example #

// Store a reference to a button
const submitBtn = document.getElementById('submit-btn');

// Later, we remove the button from the DOM
document.body.removeChild(submitBtn);
// But submitBtn still exists in memory, holding the button reference

Fix #

Manually null out the reference when you’re done with it:

const submitBtn = document.getElementById('submit-btn');

document.body.removeChild(submitBtn);
submitBtn = null; // Tell GC this reference is no longer needed

4. Closures Holding Unnecessary References #

Why it happens #

Closures retain references to variables from their outer scope. If a closure is kept alive (e.g., stored in a global variable or a long-lived object), those outer variables can’t be GC’d—even if you don’t use them in the closure anymore.

Leaking Code Example #

function createDataProcessor() {
  // A huge object we only need temporarily
  const tempHugeData = generateHugeDataset();

  // Return a closure that doesn't even use tempHugeData!
  return function() {
    console.log('Processing done');
  };
}

// Store the closure globally
window.dataProcessor = createDataProcessor();
// tempHugeData is still held in memory because the closure references its scope

Fix #

• Avoid keeping closures alive longer than necessary.
• If you must retain the closure, make sure it doesn’t hold references to unused variables:

function createDataProcessor() {
  {
    // Scope the temp data so it's not part of the closure's outer scope
    const tempHugeData = generateHugeDataset();
    // Use tempHugeData here, then it goes out of scope
  }

  return function() {
    console.log('Processing done');
  };
}

window.dataProcessor = createDataProcessor();
// tempHugeData is now eligible for GC

5. Unremoved Event Listeners #

Why it happens #

When you attach an event listener to a DOM element, the browser keeps a reference to both the element and the listener. If you remove the element without removing the listener, both the element and the listener stay in memory.

Leaking Code Example #

const modal = document.getElementById('modal');

function handleModalClick() {
  console.log('Modal clicked');
}

modal.addEventListener('click', handleModalClick);

// Later, we destroy the modal
modal.remove();
// The click listener is still attached to the modal, so neither can be GC'd

Fix #

Remove the listener before destroying the element:

const modal = document.getElementById('modal');
function handleModalClick() {
  console.log('Modal clicked');
}

modal.addEventListener('click', handleModalClick);

// When destroying the modal:
modal.removeEventListener('click', handleModalClick);
modal.remove();

Alternatively, use event delegation (attach listeners to a parent that’s always present) to avoid per-element listeners entirely.

6. Unbounded Caches #

Why it happens #

Using a plain object or Map to cache data without any cleanup logic means the cache will grow indefinitely. Every entry in the cache holds a reference to its value, so those values can’t be GC’d even if they’re no longer needed.

Leaking Code Example #

const apiCache = {};

function fetchData(url) {
  if (apiCache[url]) {
    return Promise.resolve(apiCache[url]);
  }
  return fetch(url)
    .then(res => res.json())
    .then(data => {
      apiCache[url] = data; // Never remove old entries
      return data;
    });
}

Fix #

• Implement a cache expiration policy (e.g., remove entries older than X minutes).
• Use WeakMap instead of Map if your cache keys are objects—WeakMap uses weak references, so when the key has no other references, the entry is automatically GC’d:

const apiCache = new WeakMap();

// Only works if keys are objects (e.g., request objects or unique identifiers as objects)
function fetchData(requestObj) {
  if (apiCache.has(requestObj)) {
    return Promise.resolve(apiCache.get(requestObj));
  }
  return fetch(requestObj.url)
    .then(res => res.json())
    .then(data => {
      apiCache.set(requestObj, data);
      return data;
    });
}

内容的提问来源于stack exchange，提问作者King是太阳