Unexpected global variables can be avoided through "use strict"; 2. Uncleaned event listeners need to be removed or used when component is destroyed; 3. Closures may cause external variables to be unable to be released, and unused closures should be avoided for a long time; 4. The timer refers to external objects to call clearInterval when no longer needed; 5. The cache should limit the size, and use WeakMap or WeakSet first to avoid preventing garbage collection; 6. The Memory and Performance panels of Chrome DevTools can detect memory leaks, and locate problems through heap snapshots and memory allocation timelines; 7. Preventive measures include timely unbinding events and timers, using WeakMap/WeakSet, avoiding long-term holding of DOM references, using AbortController to manage asynchronous requests, and periodic review of status management; 8. Recommended tools include Chrome DevTools, heapdump, clinical.js and Lighthouse; as long as you hold a reference, you must be responsible for releasing it. Combining good habits and tool detection can effectively prevent performance degradation caused by memory leaks.

JavaScript is a language with an automatic garbage collection mechanism, and developers usually do not need to manually manage memory. However, in actual development, memory leaks are still common, especially in long-running single-page applications (SPAs). Memory leaks can cause pages to slow down, crash, and even drag down the entire browser. This article will introduce common types of memory leaks in JavaScript, how to detect them, and effective preventive measures.

1. Common memory leak types

Although JavaScript has a garbage collector (GC), some patterns will prevent objects from being properly recycled. Here are several typical memory leak scenarios:

? Unexpected global variables

 function badFunction() {
    leakVar = "I'm accidentally global"; // Forgot to use var/let/const
}

This variable will be hung on window (browser) or global (Node.js) and exists for a long time.

Workaround : Use strict mode "use strict" to avoid accidentally creating global variables.

? Uncleaned event listener

 button.addEventListener('click', handleClick);
// There is no removeEventListener in the future

When the DOM element is removed but the event listener is still bound to the object, the element cannot be recycled (especially in old-fashioned browsers).

Recommendation : Remove event listening manually when component destruction, or use AbortController (modern way).

? Leaks caused by closure references

 function outer() {
    const hugeData = new Array(1000000).fill('data');
    return function inner() {
        console.log(hugeData.length); // The closure holds hugeData
    };
}

Even if the outer execution is completed, hugeData will not be released as long as inner exists.

Note : This is not necessarily a "leak", but if inner is not used for a long time but is not released, it will become a problem.

? Reference external objects in the timer

 setInterval(() => {
    const data = fetchData();
    document.getElementById('info').textContent = data;
}, 1000);

If the page has been switched but the timer is not cleared, data and DOM nodes will continue to consume memory.

Fixed : Use clearInterval to clean up timers that are no longer needed.

? Cache is not limited in size

 const cache = new Map();
function getData(id) {
    if (cache.has(id)) return cache.get(id);
    const result = expensiveOperation(id);
    cache.set(id, result);
    return result;
}

The cache grows infinitely, especially when the keys are objects, which may prevent garbage collection.

Optimization : Use WeakMap or WeakSet instead, or implement an LRU caching policy.

2. How to detect memory leaks

Memory panel using Chrome DevTools

This is the most direct way to detect:

1. Open DevTools → Memory Tag
2. Using Take Heap Snapshot :
   • Take a snapshot before and after the operation
   • Compare the changes in the number of objects and find the constructor with abnormal growth
3. Using Record Allocation Timeline :
   • Record memory allocation in real time
   • Can locate locations where a large number of objects are created in a short period of time

Tip : Repeat an operation (such as opening and closing the modal box) to observe whether the object continues to increase without recycling.

Record memory curves using Performance panel

• Check Memory option in the Performance panel
• Record user operation process
• Observe whether the number of memory, DOM nodes, and listeners is "only increasing but not decreasing"

Using process.memoryUsage() in Node.js

 setInterval(() => {
    console.log(process.memoryUsage());
}, 5000);

Monitor whether heapUsed continues to rise and can be preliminarily judged whether there is a leakage.

3. Best practices to prevent memory leaks

? Timely unbinding events and timers

 let timer = setInterval(poll, 1000);
// ClearInterval(timer);

In React, use the return function of useEffect to clean it up:

 useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => {
        window.removeEventListener('resize', handleResize);
    };
}, []);

? Use WeakMap/WeakSet to replace normal object cache

 const cache = new WeakMap(); // The key must be the object cache.set(domNode, expensiveData);
// When the domNode is recycled, the cache will be automatically released

WeakMap and WeakSet will not prevent garbage collection and are suitable for metadata storage.

? Avoid long-term DOM citations

 let elements = document.querySelectorAll('.item'); // Long-term holding of NodeList
// Change to get on demand, or set to null when not in use

? Use AbortController to manage asynchronous operations

 const controller = new AbortController();
fetch('/data', { signal: controller.signal })
    .catch(err => {
        if (err.name === 'AbortError') return;
    });

// controller.abort() during cleaning; // Cancel the request and release the resource

? Regularly review complex components and state management

• Avoid cache of large amounts of uncleaned data in Redux
• Vue/React components avoid saving DOM nodes or function closures in data/state

4. Tool recommendations

• Chrome DevTools : The most powerful local analytics tool
• heapdump (Node.js): generate memory snapshots for analysis
• clinic.js : Node.js performance diagnostic tool, visualize memory problems
• Lighthouse : Suggestions for detecting page memory usage

Memory leaks are not easy to detect in JavaScript, but have far-reaching impacts. The key is: whoever holds the citation will be responsible for the release . Develop good resource management habits and regularly checking with tools can effectively avoid the application "slower and slower".

Basically all this is not complicated but easy to ignore.

The above is the detailed content of Memory Leak Detection and Prevention in JavaScript. For more information, please follow other related articles on the PHP Chinese website!