Detailed explanation of examples of JavaScript variable scope, memory, DOM leaks and other issues

Scope

The variable is not declared within the function or declared without var, it is a global variable and has a global scope. All properties of the window object have a global scope; in The code can be accessed anywhere. Variables declared inside a function and modified with var are local variables and can only be used within the function body. Although the parameters of the function do not use var, they are still local variables.

No block-level scope

// if语句：

<script type="text/javascript">
if(true){            //if语句的花括号没有作用域的功能。

var box = "trigkit4";
}
alert(box);//弹出 trigkit4
</script>

The same is true for for loop statements.

Variable query

In variable query, accessing local variables is faster than global variables, so there is no need to search up the scope chain.
The following example:

<script type="text/javascript">
   var name = "Jack";
   function setName(){
      var name = "trigkit4";
      return name; //从底层向上搜索变量
  }
  alert(setName());   
</script>

Memory problem

javascript has an automatic garbage collection mechanism. Once the data is no longer used, you can Set it to "null" to release the reference

Circular reference

A very simple example: a DOM object is referenced by a Javascript object, and at the same time it is referenced The same or other Javascript objects, this DOM object may cause memory leaks. The reference to this DOM object will not be reclaimed by the garbage collector when the script stops. To break a reference cycle, the object referencing the DOM element or a reference to the DOM object needs to be assigned null.

Closure

When a variable external to the closure is introduced in the closure, the object cannot be garbage collected (GC) when the closure ends.

var a = function() {
 var largeStr = new Array(1000000).join('x');
 return function() {
  return largeStr;
 }
}();

DOM leak

When the original COM is removed, the child node reference cannot be removed unless it is removed. Recycle.

var select = document.querySelector;
var treeRef = select('#tree');
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf'); 
var body = select('body');
body.removeChild(treeRef);
//#tree不能被回收入，因为treeRef还在
//解决方法:
treeRef = null;
//tree还不能被回收，因为叶子结果leafRef还在
leafRef = null;
//现在#tree可以被释放了。

Timers timer leaks

Timers are also a common place where memory leaks occur:

for (var i = 0; i < 90000; i++) {
 var buggyObject = {
  callAgain: function() {
   var ref = this;
   var val = setTimeout(function() {
    ref.callAgain();
   }, 90000);
  }
 }
 buggyObject.callAgain();
 //虽然你想回收但是timer还在
 buggyObject = null;
}

Debug Memory

Chrome’s own memory debugging tool can easily view memory usage and memory leaks:
In Timeline -> Memory Click record:

The above is the detailed content of Detailed explanation of examples of JavaScript variable scope, memory, DOM leaks and other issues. For more information, please follow other related articles on the PHP Chinese website!