JavaScript 内存回收机制

引用

垃圾回收算法主要依赖引用的概念，例如一个对象若是有另一个对象的访问权限，这里就叫作一个对象引用另一个对象，不论这里是显式仍是隐式

回收机制

Js具备自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。第二种程序员本身释放

这个算最简单的回收算法，大体是某地对象当没有引用指向它的时候，也就是零指向，这个对象就会被垃圾回收机制回收

let arr = [1,2,3]

arr = null  // [1,2,3]没有被引用，会被自动回收

标记清除

工做原理：当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工做流程：

垃圾回收器在运行的时候会给存储在内存中的全部变量都加上标记。

去掉环境中的变量以及被环境中的变量引用的变量的标记（闭包）。

依然被标记的会被视为准备删除的变量。

垃圾回收器完成内存清除工做，销毁那些带标记的值并回收他们所占用的内存空间。

引用计数

工做原理：跟踪记录每一个值被引用的次数

工做流程：

声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。

同一个值又被赋值给另外一个变量，这个引用类型值的引用次数加1.

当包含这个引用类型值的变量又被赋值成另外一个值了，那么这个引用类型值的引用次数减1.

当引用次数变成0时，说明没办法访问这个值了。

当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

 

 

 

 

 

 

 

 

 

问题：循环引用
function f() {
    var o1 = {}
    var o2 = {}
    o1.p = o2; // o1 引用o2
    o2.p = o1; // o2引用o1,这里造成了一个循环引用
}
f()

 

 

 

 

objA指向内存中的引用类型，而这个引用类型的一个值又指向了另外一个引用类型，这样，每一个引用类型的引用次数都是2，且在引用类型之间造成了循环引用，这样，即便problem()函数执行完毕，把后期再也不使用的局部变量objA和objB释放，可是由于引用类型的引用次数仍是1，那么这两个引用类型仍是不能被释放的，这就形成了内存泄露。

 

• 循环引用其实是在堆中的两个引用类型之间的循环引用，如右边的两个箭头就构成了一个循环。
• 由于IE中的BOM、DOM的实现使用了COM，IE的JavaScript引擎使用的是标记清除的策略，可是JavaScript访问的COM对象依然是基于引用计数的策略的。因此会存在循环引用的问题

 

var element = document.getElementById("some_element");
var myObj =new Object();
myObj.element = element;
element.someObject = myObj;

 

这个例子中，一个DOM元素和一个原生JavaScript对象之间创建了循环引用。这样，即便例子中的DOM从页面中移除，内存也不会被回收

解决方法：以手动切断他们的循环引用：

 

 

myObj.element = null;
element.someObject =null;

 

内存泄漏

使用了内存以后， 若是后面他们不会再被用到，可是尚未及时释放，这就叫作内存泄露（memory leak）。若是出现了内存泄露，那么有可能使得内存愈来愈大，而致使浏览器崩溃。

引发内存泄漏的状况

1. 意外的全局变量引发的内存泄漏。

 

 

function foo(arg) {
    bar = "this is a hidden global variable"; // 没有用var
  }


 function foo() {
    this.variable = "potential accidental global";
  }
  // 通常函数调用，this指向全局

 

缘由：全局变量，不会被回收。 js中的全局变量，只有当页面被关闭后才会销毁

解决：使用严格模式避免，函数内使用var定义，块内使用let、const。 

2. 闭包引发的内存泄漏

缘由：闭包能够维持函数内局部变量，使其得不到释放。

 

 

function do(){
    let thing = 'eat'
    return function(){
        console.log(thing)
    }}

 

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用

三、  删除元素形成的内存泄露。

<div id="wrap">
    <span id="link">点击</a>
  </div>
  <script>
    let wrap = document.querySelector('#wrap'),
        link = document.querySelector('#link');
    function handleClick() {
      alert('clicked');
    }
    link.addEventListener('click', handleClick );

    wrap.removeChild(link);
document.body.appendChild(link);
</sript>

 

即便link已经被移除了，而后咱们经过appendChild添加到div平级的地方，而后点击以后仍是有事件发生的，说明这里元素被移除而后添加，事件仍是能够用的。

可是，咱们已经将之移除了，因此，后面就不须要了，可是span标签仍是被link变量所引用，这样，就形成了内存泄露。

因此，咱们能够在link被移除的时候，就清除这个引用，以下所示：

 

 

 

<div id="wrap">
    <span id="link">点击</a>
  </div>
  <script>
     let wrap = document.querySelector('#wrap'),
        link = document.querySelector('#link')
    function handleClick() {
      alert('clicked');
    }
    link.addEventListener('click', handleClick );

    wrap.removeChild(link);
　　link = null

 

缘由：虽然DOM删除了，可是对象中还存在对dom的引用

解决：手动删除。

被遗忘的定时器或者回调

 

 

var serverData = loadData();setInterval(function() {
    var renderer = document.getElementById('renderer');
    if(renderer) {
        renderer.innerHTML = JSON.stringify(serverData);
    }}, 5000);

 

 

缘由：定时器中有dom的引用，即便dom删除了，可是定时器还在，因此内存中仍是有这个dom。 ** 解决**：手动删除定时器和dom。

子元素存在引用引发的内存泄漏

缘由：div中的ul li ， 获得这个div，会间接引用某个获得的li，那么此时由于div间接引用li，即便li被清空，也仍是在内存中，而且只要li不被删除，他的父元素都不会被删除。 ** 解决**：手动删除清空

 

堆内存和栈内存

基本类型是：Undefined/Null/Boolean/Number/String，

基本类型的值存在内存中，被保存在栈内存中。从一个变量向另外一个变量复制基本类型的值，会建立这个值的一个副本。

引用类型：object

引用类型的值是对象，保存在堆内存中。

1. 包含引用类型值的变量实际上包含的并非对象自己，而是一个指向该对象的指针。从一个变量向另外一个变量复制引用类型的值，复制的实际上是指针，所以两个变量最终都指向同一个对象。

2. js不容许直接访问内存中的位置，也就是不能直接访问操做对象的内存空间。在操做对象时，其实是在操做对象的引用而不是实际的对象。

堆和栈的区别

1、堆栈空间分配区别：

一、栈（操做系统）：由操做系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操做方式相似于数据结构中的栈；

二、堆（操做系统）： 通常由程序员分配释放，若程序员不释放，程序结束时可能由OS回收，分配方式却是相似于链表。

2、堆栈缓存方式区别：

一、栈使用的是一级缓存， 他们一般都是被调用时处于存储空间中，调用完毕当即释放；

二、堆是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并非一旦成为孤儿对象就能被回收）。因此调用这些对象的速度要相对来得低一些。

3、堆栈数据结构区别：

 

堆（数据结构）：堆能够被当作是一棵树，如：堆排序； 　　栈（数据结构）：一种先进后出的数据结构。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

回收机制

Js具备自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。第二种程序员本身释放

这个算最简单的回收算法，大体是某地对象当没有引用指向它的时候，也就是零指向，这个对象就会被垃圾回收机制回收

let arr = [1,2,3]

arr = null  // [1,2,3]没有被引用，会被自动回收

 

标记清除

工做原理：当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工做流程：

垃圾回收器在运行的时候会给存储在内存中的全部变量都加上标记。

去掉环境中的变量以及被环境中的变量引用的变量的标记（闭包）。

依然被标记的会被视为准备删除的变量。

垃圾回收器完成内存清除工做，销毁那些带标记的值并回收他们所占用的内存空间。

引用计数

工做原理：跟踪记录每一个值被引用的次数

工做流程：

声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。

同一个值又被赋值给另外一个变量，这个引用类型值的引用次数加1.

当包含这个引用类型值的变量又被赋值成另外一个值了，那么这个引用类型值的引用次数减1.

当引用次数变成0时，说明没办法访问这个值了。

当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

 

 

 

问题：循环引用

function f() {

var o1 = {}

var o2 = {}

o1.p = o2; // o1 引用o2

o2.p = o1; // o2引用o1,这里造成了一个循环引用

}

f()

型，而这个引用类型的一个值又指向了另外一个引用类型，这样，每一个引用类型的引用次数都是2，且在引用类型之间造成了循环引用，这样，即便problem()函数执行完毕，把后期再也不使用的局部变量objA和objB释放，可是由于引用类型的引用次数仍是1，那么这两个引用类型仍是不能被释放的，这就形成了内存泄露。

·  循环引用其实是在堆中的两个引用类型之间的循环引用，如右边的两个箭头就构成了一个循环。

·  由于IE中的BOM、DOM的实现使用了COM，IE的JavaScript引擎使用的是标记清除的策略，可是JavaScript访问的COM对象依然是基于引用计数的策略的。因此会存在循环引用的问题

内存泄漏

本质上来讲，内存泄漏就是不被须要的内存，由于某种缘由，没有被回收或者释放

使用了内存以后， 若是后面他们不会再被用到，可是尚未及时释放，这就叫作内存泄露（memory leak）。若是出现了内存泄露，那么有可能使得内存愈来愈大，而致使浏览器崩溃

引发内存泄漏的状况

1. 意外的全局变量引发的内存泄漏。

 function foo(arg) {

    bar = "this is a hidden global variable"; // 没有用var  }

 

 

 function foo() {

    this.variable = "potential accidental global";

  }

  // 通常函数调用，this指向全局

缘由：全局变量，不会被回收。 js中的全局变量，只有当页面被关闭后才会销毁

解决：使用严格模式避免，函数内使用var定义，块内使用let、const。 

2. 闭包引发的内存泄漏

缘由：闭包能够维持函数内局部变量，使其得不到释放。

function do(){

    let thing = 'eat'

    return function(){

        console.log(thing)

    }}

 

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用

三、  删除元素形成的内存泄露。

<div id="wrap">

    <span id="link">点击</a>

  </div>

  <script>

    let wrap = document.querySelector('#wrap'),

        link = document.querySelector('#link');

    function handleClick() {

      alert('clicked');

    }

    link.addEventListener('click', handleClick );

 

    wrap.removeChild(link);

document.body.appendChild(link);

即便link已经被移除了，而后咱们经过appendChild添加到div平级的地方，而后点击以后仍是有事件发生的，说明这里元素被移除而后添加，事件仍是能够用的。

可是，咱们已经将之移除了，因此，后面就不须要了，可是span标签仍是被link变量所引用，这样，就形成了内存泄露。

因此，咱们能够在link被移除的时候，就清除这个引用，以下所示：

 <div id="wrap">

    <span id="link">点击</a>

  </div>

  <script>

     let wrap = document.querySelector('#wrap'),

        link = document.querySelector('#link')

    function handleClick() {

      alert('clicked');

    }

    link.addEventListener('click', handleClick );

 

    wrap.removeChild(link);

link = null

缘由：虽然DOM删除了，可是对象中还存在对dom的引用

解决：手动删除。

被遗忘的定时器或者回调

var serverData = loadData();setInterval(function() {

    var renderer = document.getElementById('renderer');

    if(renderer) {

        renderer.innerHTML = JSON.stringify(serverData);

    }}, 5000);

 

缘由：定时器中有dom的引用，即便dom删除了，可是定时器还在，因此内存中仍是有这个dom。 ** 解决**：手动删除定时器和dom。

子元素存在引用引发的内存泄漏

缘由：div中的ul li ， 获得这个div，会间接引用某个获得的li，那么此时由于div间接引用li，即便li被清空，也仍是在内存中，而且只要li不被删除，他的父元素都不会被删除。 ** 解决**：手动删除清空