Investigating and Preventing Memory Leaks in Web Pages Using Chrome DevTools
The article shows how to detect and stop memory leaks in web pages with Chrome DevTools—using heap snapshots, allocation‑instrumentation timelines, and the Performance panel—to expose leaks from globals, closures, detached DOM nodes, excess elements, or console logging, and offers practical coding guidelines to avoid them.
Many developers overlook memory leaks in their pages because early‑stage leaks grow slowly and are often hidden by page refreshes. As pages become more complex—especially with SAP‑style interactions—leaks become serious, leading to UI freezes that users notice.
This article introduces simple investigation methods, summarizes common causes of memory leaks, and provides concrete ways to avoid them.
Simple example (Code 1) demonstrates a button that pushes 3,000 Date objects into an array on each click, and a clear button that empties the array. The code is intentionally memory‑intensive:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>memory-leak</title>
</head>
<body>
<p>push date for <button class="count-date">0</button> times</p>
<p>add Date: <button class="push-date">add date</button></p>
<p>clear: <button class="clear">clear</button></p>
<script>
const pushDate = document.querySelector(".push-date");
const dateCount = document.querySelector(".count-date");
let dateAry = [];
let dateNum = 0;
// write date
pushDate.addEventListener("click", () => {
dateCount.innerHTML = `${++dateNum}`;
for (let j = 0; j < 3000; ++j) {
dateAry.push(new Date());
}
});
const clear = document.querySelector(".clear");
// recycle memory
clear.addEventListener("click", () => {
dateAry = [];
dateCount.innerHTML = "0";
});
</script>
</body>
</html>Running this code shows that each click increases memory by roughly 200 KB. The article explains how to capture a series of Heap Snapshots in Chrome DevTools, filter by the Date constructor, and examine the retained size and holding chain to locate the leaking array ( dateAry ).
Allocation instrumentation on timeline offers a more visual approach. When the “Allocation instrumentation on timeline” radio is selected, each memory allocation appears as a “heartbeat” on the right‑hand timeline. Clicking the “add date” button generates a heartbeat whose height reflects the allocated size; clicking “clear” removes the corresponding beats, confirming that the allocation is not reclaimed.
Performance panel can also record memory alongside CPU activity. By enabling the Memory checkbox and recording a session, you can see memory growth spikes when the button is clicked and a sharp drop after clearing, as illustrated in the article’s screenshots.
The article then categorizes typical leak scenarios:
Global variables : Objects attached to window (the GC root) are never collected.
Closures : A closure that captures a large array keeps it alive even after the outer function finishes. Code 3 shows a closure‑based leak and how naming the function (or avoiding the closure) makes the leak easier to spot.
Detached DOM : Removing a DOM node without also removing its event listeners leaves a “detached” element that remains in memory. Code 4 and the accompanying snapshot table illustrate this, and Code 5 demonstrates proper cleanup by unbinding listeners and removing the element.
Excessive DOM nodes : Dynamically creating many nodes without cleanup (e.g., toast or carousel components) inflates the “DOM Nodes” count in the Performance monitor. Code 6 shows a simple example that continuously appends buttons.
Console logging : Objects logged to the console stay referenced, preventing GC. Code 7 logs a large array, causing a noticeable leak; the fix is to avoid logging huge structures.
Finally, the article summarizes that Heap Snapshots provide full object visibility and are useful for detecting detached DOM leaks, while Allocation instrumentation offers a quicker view of allocation patterns. Combining these tools with disciplined coding practices—avoiding unnecessary globals, naming functions, unbinding listeners, and limiting console output—helps prevent memory leaks in front‑end applications.
Amap Tech
Official Amap technology account showcasing all of Amap's technical innovations.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.