Understanding JavaScript Memory Leaks and Garbage Collection

The article begins with a question about page lag and outlines possible causes, then focuses on memory leaks as a key factor.

It defines a memory leak as the failure to release unused memory due to oversight or programming errors, illustrating with a variable that remains allocated despite no longer being needed.

JavaScript memory is divided into stack memory for primitive values and heap memory for complex objects.

The automatic garbage collection mechanism in JavaScript uses mark‑and‑sweep (and briefly mentions mark‑compact and incremental execution) to reclaim unreachable values, while noting that excessive GC work can cause UI jank.

Chrome DevTools are introduced for monitoring memory: using the Performance panel to record JS Heap, documents, nodes, listeners, and GPU memory, and the Memory panel for heap snapshots, allocation instrumentation, and detecting detached DOM objects.

Five common leak scenarios are examined:

Improper closures: a function returns an inner variable that remains referenced by an outer variable, preventing collection. Example code: function fn1(){let a={name:'零一'};let b=3;function fn2(){let c=[1,2,3];}fn2();return a;}let res=fn1();

Global variables: undeclared assignments create accidental globals that persist for the page lifetime. Example: function fn1(){name=new Array(99999999);}fn1();

Detached DOM nodes: a removed DOM element still referenced by a variable keeps its memory alive. Example: let btn=document.querySelector('button');let child=document.querySelector('.child');let root=document.querySelector('#root');btn.addEventListener('click',function(){root.removeChild(child);});

Console logging: console.log retains objects in the debugger, preventing GC unless filtered for production. Example: document.querySelector('button').addEventListener('click',function(){let obj=new Array(1000000);console.log(obj);});

Forgotten timers: setInterval / setTimeout callbacks hold references to outer variables; clearing the timer with clearInterval or clearTimeout is required. Example: setInterval(()=>{let myObj=largeObj;},1000);

Each scenario includes example code, demonstration with Performance and Memory panels, and a corrected version that eliminates the leak.

The article concludes by advising developers to routinely check for these patterns when debugging performance issues and to nullify unused references or clear timers to aid garbage collection.