What is a memory leak and how to fix it

Memory leak means that when an object is ineffective and should be recycled, but it cannot be recycled because of another object's reference to it, and it remains in the heap memory, it is called a memory leak. Common ones include unexpected global variables, DOM leaks and circular references, etc.

[Recommended course: JavaScript Tutorial】

Memory leak

Memory leak generally refers to when an object has no effect and should be recycled. Another object in use cannot be recycled due to its reference. This object that cannot be recycled stays in the heap memory, which causes a memory leak.

When an object is no longer needed When the object that is supposed to be recycled is used, another object in use holds a reference to it, causing it to not be recycled. This causes the object that should be recycled to not be recycled and stays in the heap memory, which causes a memory leak.

Common memory leaks:

1. Unexpected global variables

The way Js handles undefined variables: Undefined The variable will create a new variable in the global object. In the browser, the global object is window.

function foo(arg) { 
bar = "this is a hidden global variable"; //等同于window.bar="this is a hidden global variable"
this.bar2= "potential accidental global";//这里的this 指向了全局对象（window）,
等同于window.bar2="potential accidental global"}

Solution: Add and enable strict mode 'use strict' in the JavaScript program to effectively avoid the above problems.

Note: Global variables used to temporarily store large amounts of data must be set to null or reassigned after ensuring that the data is processed.

2. DOM leakage

In the browser, the engines used by DOM and JS are different. DOM uses a rendering engine, while JS uses v8 engine, so using JS to operate DOM will consume more performance, so in order to reduce DOM operations, we will use variable references to cache them in the current environment. If you perform some deletion and update operations, you may forget to release the cached DOM, thus causing a memory leak

Example: Reference to uncleaned DOM elements

var refA = document.getElementById('refA');
document.body.removeChild(refA); // #refA不能回收，因为存在变量refA对它的引用。
将其对#refA引用释放，但还是无法回收#refA。

Solution: Set refA = null;

3. Forgotten timers and callback functions

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

Such code is very common, if the element with id is Node If removed from the DOM, the timer will still exist. At the same time, because the callback function contains a reference to someResource, someResource outside the timer will not be released.

4. Circular Reference

In the memory management environment of js, if object A has permission to access the object B, it is called object A referencing object B. The reference counting strategy is to see if the object has other objects referencing it. If no object refers to the object, then the object will be recycled.

var obj1 = { a: 1 }; // 一个对象（称之为 A）被创建，赋值给 obj1，A 的引用个数为 1  
var obj2 = obj1; // A 的引用个数变为 2  
 obj1 = 0; // A 的引用个数变为 1 
 obj2 = 0; // A 的引用个数变为 0，此时对象 A 就可以被垃圾回收了

But the biggest problem with reference counting is circular references.

function func() {  
    var obj1 = {};  
    var obj2 = {};  
    obj1.a = obj2; // obj1 引用 obj2  
    obj2.a = obj1; // obj2 引用 obj1  }

When the function is executed, the return value is undefined, so the entire function and internal variables should be recycled. However, according to the reference counting method, the number of references of obj1 and obj2 is not 0, so they are not will be recycled. So to solve this problem, you can set their values ​​to null

Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

The above is the detailed content of What is a memory leak and how to fix it. For more information, please follow other related articles on the PHP Chinese website!