Home > Article > Web Front-end > What should I do if a JS memory leak occurs? How to avoid JS memory leaks?

What should I do if a JS memory leak occurs? How to avoid JS memory leaks?

藏色散人forward: 2021-08-05 14:58:492315browse

Many developers may not usually care about whether there are memory leaks in the pages they maintain. The reason may be that simple page memory leaks are very slow at the beginning, and may be refreshed by the user before causing serious freezes. The problem is also It was hidden, but as the page became more and more complex, especially when your page interacted in SAP mode, the hidden danger of memory leak became more and more serious, until suddenly one day the user reported: "The page gets stuck after a while of operation. I can’t move anymore, I don’t know why, it wasn’t like this before.”

This article introduces the investigation methods of memory leaks through some simple examples, summarizes the causes and common situations of memory leaks, and summarizes how to avoid memory leaks for each situation. hope that it can help us.

Recommended video: "javascript basic tutorial"

1. A simple example

Let’s look at one first A simple example, the following is the code corresponding to this example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>memory-leak</title>
  </head>
  <body>
    <p>push date for <button>0</button> times</p>
    <p>add Date: <button>add date</button></p>
    <p>clear: <button>clear</button></p>
    <script>
      const pushDate = document.querySelector(".push-date");
      const dateCount = document.querySelector(".count-date");
      let dateAry = [];
      let dateNum = 0;
      // 【写入 date】
      pushDate.addEventListener("click", () => {
        dateCount.innerHTML = `${++dateNum}`;
        for (let j = 0; j < 3000; ++j) {
          dateAry.push(new Date());
        }
      });
      const clear = document.querySelector(".clear");
      // 【回收内存】
      clear.addEventListener("click", () => {
        dateAry = [];
        dateCount.innerHTML = "0";
      });
</script>
  </body>
</html>

Code 1

The logic of code 1 is very simple: when the "add date" button is clicked, 3000 new items will be pushed to the dateAry array. Date object, the dateAry will be cleared when the "clear" button is clicked. Obviously, the "add date" operation will cause the memory usage to continue to grow. If this logic is used in actual applications, it will cause a memory leak (regardless of the deliberate design of the code logic like this). Let's take a look at how to investigate this. What causes memory growth and how to find memory leaks.

1 heap snapshot

In order to avoid interference from browser plug-ins, we create a new incognito window in chrome to open the above code. Then find the "Heap Snapshot" tool in the Memory tool in chrome's devtools, click the record button in the upper left corner to record a Snapshot, then click the "add date" button, and after manually triggering GC (Garbage Collect), record a Snapshot again. Repeat the above operation several times, as shown in Figure 1, to obtain a series of Snapshots.