js垃圾回收机制与如何手动进行垃圾回收释放内存？

内存垃圾回收的意义

在不需要字符串、对象的时候，要释放其所占的内存，否则系统中的内存有限，占用太多会造成系统崩溃。

垃圾回收的机制

js会自动回收垃圾内存。
垃圾回收就是找出那些不再继续使用的变量，释放其占用的内存。
js会按照固定的时间间隔周期性的执行垃圾回收的操作。
全局变量的的生命周期会知道浏览器关闭结束，也就是说全局变量不会被当成垃圾回收。

最常见的垃圾回收方式：标记清除、引用计数。

1）标记清除（变量）

目前最常用的垃圾回收机制，也是当前浏览器才用的机制。

原理：

标记清除中有两个重要的概念“进入环境”、“离开环境”。“进入环境”：是变量进入执行环境，“离开环境”：是变量完成任务，离开执行环境。

当声明一个变量时，这个变量就是进入的执行环境，浏览器给加“进入环境”的标记，当离开执行环境时，浏览器给它加“离开环境”的标记。并且回收。

流程：

垃圾收集器在运行的时候给所有内存中的变量打上标记。
去掉环境中的变量以及被环境中的变量引用的变量的标记。
那些还存在标记的变量则被视为准备删除的变量。
最后垃圾收集器会执行清除内存的工作，销毁那些带标记的值并回收他们占用的内存。

2）引用计数

跟踪记录每个值的引用次数（值）

流程：

声明一个变量，并给这个变量赋值，这个值的引用次数就是1
同一个值被赋给另一个变量，这个值的引用次数+1
变量的值被更改了那原本那个值的引用次数-1
引用次数为0时，说明没办法访问这个值了
垃圾收集器下一次运行时，会释放引用次数为0的值所占的内存

这个流程潜在一个问题：循环引用，则引用次数不会为0，将不能被自动回收了。

循环引用：是指A中包含指向对象B的指针，而对象B中也包含一个指向对象A的引用。

function foo(){

    let A = new Object();

    let B = new Object();

    A.property = B;

    B.property = A;

}

四、内存泄露的原因

js虽然有自动回收机制，但是还是有些情况会造成内存泄漏：

全局变量不会被自动回收

function foo(){
    this.bar2 = "默认绑定this指向全局"  //全局变量 == window.bar2
    bar = "全局变量"  // 没有var声明的变量也是全局变量 == window.bar
}

foo();

解决办法：在函数内使用严格模式

function foo(){
    "use strict"
    this.bar2 = "默认绑定this指向全局"  //全局变量 == window.bar2
    bar = "全局变量"  // 没有var声明的变量也是全局变量 == window.bar
}

foo();

当不需要setInterval或者setTimeout时，定时器没有被清除。定时器的回调函数以及内部依赖的变量都不能被回收，造成内存泄露。

let data= getData();

setInterval(function(){
    let node = document.getElementById("id");
    if(node){
        node.innerHTML = JSON.stringify(data);
        // 定时器也没有被清除
    }
    // node、someResource 存储了大量数据 无法回收
},1000)

解决办法：定时器结束时，手动清除定时器。

循环引用，上文提到。

解决办法：手动清除变量，释放内存。

没有清除的DOM元素引用

let root= document.getElementById("root");

document.body.removeChild(root);  // 页面上dom删除了

console.log(root);  // 能输出值。所以虽然在页面上dom删除了，但在js中 这个dom的变量还在 没有被回收

root= null;  // 解决办法 手动清除

console.log(root);  // 可以看到已经被清除了

闭包引起的内存泄漏：闭包实际上非常容易造成JavaScript对象和DOM对象的隐蔽循环引用

解决办法：将事件处理函数定义在外部，解除闭包；或者在定义事件处理函数的外部函数中，删除对dom的引用,手动回收。

function foo(){
    let element = document.getElementById("div1");  // 1
    element.onclick = function() {
         console.log("this is event"); // 2
    }
}

foo();

以上函数foo中，用匿名函数创建了一个闭包

第1处：js对象 element 引用了一个dom对象 JS(element) ----> DOM(div1)

第2处：dom对象的onclick属性引用了一个匿名函数，这形成一个闭包，这个匿名函数可以引用整个ex内的所有对象，包括element DOM(div1.onclick) ---->JS(element)

由此形成了JavaScript对象和DOM对象的隐蔽循环引用。

解决办法：

function foo(){
    let element = document.getElementById("div1");  // 1
    element.onclick = function(){
        console.log("this is event"); // 2
    }
    element = null; //添加的语句 删除对dom的引用,手动回收
}

function foo(){
  let element = document.getElementById("div2")
  let myName = "lili"
  element.onclick = function(){
    console.log(myName)
  }
}

foo();

由于js中只有函数才具有独立的作用域。

以上函数foo中，onclick引用的匿名函数去访问myName的时候，发现自身作用域中没有这个myName变量，

所以需要去访问父作用域中去调用这个myName变量，形成了闭包，所以myName这个变量会一直存在。

myName这个变量在onclick事件运行之后还会顽固的存在在内存中。

解决办法是运行完成后手动清除 myName = null

daily-interview / fe-interview