关于内存泄漏:JavaScript-内存泄漏

生存可能不像你设想的那么好，然而也不会像你设想的那么蹩脚。人的软弱和刚强都超乎了本人的设想，有时候可能软弱的一句话就泪流满面，有时候你发现自己咬着牙，曾经走过了很长的路

如何防止 JavaScript 中的内存透露

像 C 语言这样的底层语言个别都有底层的内存治理接口，比方 malloc()和 free()。相同，JavaScript 是在创立变量（对象，字符串等）时主动进行了分配内存，并且在不应用它们时“主动”开释。开释的过程称为垃圾回收。这个“主动”是凌乱的本源，并让 JavaScript（和其余高级语言）开发者谬误的感觉他们能够不关怀内存治理。

什么是内存透露？

简而言之，内存透露是 JavaScript 引擎无奈回收的已分配内存。当您在应用程序中创建对象和变量时，JavaScript 引擎会分配内存，当您不再须要这些对象时，它会十分聪慧地革除内存。内存透露是因为逻辑缺点引起的，它们会导致应用程序性能不佳。

在深入探讨不同类型的内存透露之前，让咱们先理解一下 JavaScript 中的内存治理和垃圾回收。

内存生命周期

在任何编程语言中，内存生命周期都蕴含三个步骤：

• 内存调配：操作系统在执行过程中依据须要为程序分配内存
• 应用内存：您的程序应用以前调配的内存，您的程序能够对内存执行 read 和操作 write
• 开释内存：工作实现后，调配的内存将被开释并变为闲暇。在 JavaScript 等高级语言中，内存开释由垃圾收集器解决
  如果您理解 JavaScript 中的内存调配和开释是如何产生的，那么解决应用程序中的内存透露就非常容易。

内存调配

JavaScript 有两种用于内存调配的存储选项。一个是栈，一个是堆。所有根本类型，如 number、Boolean 和 undefined 都将存储在堆栈中。堆是对象、数组和函数等援用类型存储的中央。

动态调配和动态分配

编译代码时，编译器能够查看原始数据类型，并提前计算它们所需内存。而后将所需的数量调配给调用堆栈中的程序。这些变量调配的空间称为堆栈空间（stack space），因为函数被调用，它们的内存被增加到现有内存（存储器）的顶部。它们终止时，它们将以 LIFO（后进先出）程序被移除。

援用类型变量须要多少内存无奈在编译时确定，须要在运行时依据理论应用状况分配内存，此内存是从堆空间（heap space）调配的。

栈

Stack 遵循 LIFO 办法分配内存。所有根本类型，如 number、Boolean 和 undefined 都能够存储在栈中：

堆

对象、数组和函数等援用类型存储在堆中。援用类型的大小无奈在编译时确定，因而内存是依据对象的应用状况调配的。对象的援用存储在栈中，理论对象存储在堆中：

在上图中，otherStudent 变量是通过复制 student 变量创立的。在这种状况下，otherStudent 是在堆栈上创立的，但它指向堆上的 student 援用。

咱们曾经看到，内存周期中内存调配的次要挑战是何时开释调配的内存并使其可用于其余资源。在这种状况下，垃圾回收就派上用场了。

垃圾回收器

应用程序内存透露的次要起因是不须要的援用造成的。而垃圾回收器的作用是找到程序不再应用的内存并将其开释回操作系统以供进一步调配。

要晓得什么是不须要的援用，首先，咱们须要理解垃圾回收器是如何辨认一块内存是不可用的。垃圾回收器次要应用两种算法来查找不须要的援用和无法访问的代码，那就是援用计数和标记革除。

援用计数

援用计数算法查找没有援用的对象。如果不存在指向对象的援用，则能够开释该对象。
让咱们通过上面的示例更好地了解这一点。共有三个变量，student, otherStudent，它是 student 的正本，以及 sports，它从 student 对象中获取 sports 数组：

let student = {
    name: 'Joe',
    age: 15,
    sports: ['soccer', 'chess']
}
let otherStudent = student;
const sports = student.sports;
student = null;
otherStudent = null;

在下面的代码片段中，咱们将 student 和 otherStudent 变量调配给空值，通知咱们这些对象没有对它的援用。在堆中为它们调配的内存（红色）能够轻松开释，因为它是零援用。

另一方面，咱们在堆中还有另一块内存，它不能被开释，因为它有对象 sports 援用。

当两个对象都援用本人时，援用计数算法就有问题了。简略来说，如果存在循环援用，则该算法无奈辨认闲暇对象。

在上面的示例中，person 和 employee 变量互相援用：

let person = {name: 'Joe'};
let employee = {id: 123};
person.employee = employee;
employee.person = person;
person = null;
employee = null;

创立这些对象后 null，它们将失去堆栈上的援用，但对象依然留在堆上，因为它们具备循环援用。援用计数算法无奈开释这些对象，因为它们具备援用。循环援用问题能够应用标记革除算法来解决。

标记革除

mark-and-sweep 算法将不须要的对象定义为“不可达到”的对象。如果对象不可达到，则算法认为该对象是不必要的：

标记革除算法遵循两个步骤。首先，在 JavaScript 中，根是全局对象。垃圾收集器周期性地从根开始，查找从根援用的所有对象。它会标记所有可达的对象 active。而后，垃圾回收器会开释所有未标记为 active 的对象的内存，将内存返回给操作系统。

内存透露的类型

咱们能够通过理解在 JavaScript 中如何创立不须要的援用来避免内存透露，以下状况会导致不须要的援用。

未声明或意外的全局变量

JavaScript 容许的形式之一是它解决未声明变量的形式。对未声明变量的援用会在全局对象中创立一个新变量。如果您创立一个没有任何援用的变量，它的根将是全局对象。

正如咱们刚刚在标记革除算法中看到的，间接指向根的援用总是 active，垃圾回收器无奈革除它们，从而导致内存透露：

function foo(){this.message = 'I am accidental variable';}
foo();

作为解决方案，尝试在应用后使这些变量有效，或者启用 JavaScript 的严格模式（use strict）以避免意外的全局变量。

use strict

严格模式能够打消 Javascript 语法的一些不合理、不谨严之处，缩小一些怪异行为，比方以下示例：

"use strict";
x = 3.14;       // 报错 (x 未定义)

"use strict";
myFunction();

function myFunction() {y = 3.14;   // 报错 (y 未定义)
}

x = 3.14;       // 不报错
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

闭包

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的援用的组合。换而言之，闭包让开发者能够从外部函数拜访内部函数的作用域。在 JavaScript 中，闭包会随着函数的创立而被同时创立。

闭包的作用次要是实现函数式编程中的柯里化、模块化、公有变量等个性。柯里化是将一个承受多个参数的函数转换为承受单个参数的函数序列，这是通过把参数格式化成一个数组或对象并返回一个新闭包实现的。模块化是通过利用闭包的公有变量个性，把裸露给内部的接口和公有变量封装在一个函数作用域内，避免内部作用域净化、变量反复定义等问题。

只管闭包有诸多长处，但同时也存在内存透露的问题。闭包会在函数执行结束之后依然持有对外部变量的援用，从而导致这些变量无奈被垃圾回收。这种状况通常产生在循环中定义的函数或者事件绑定等场景中。为防止内存透露，咱们须要手动解除对外部变量的援用，形式包含解除事件绑定、应用局部变量代替全局变量等技巧。

上面通过代码例子来进一步阐明闭包的利用和内存透露问题：

// 例子 1：柯里化
function add(x) {return function(y) {return x + y;};
}

const add5 = add(5);
console.log(add5(3)); // 8

// 例子 2：模块化
const counter = (function() {
  let value = 0;

  return {increment() {
      value++;
      console.log(value);
    },

    decrement() {
      value--;
      console.log(value);
    }
  };
})();

counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1

// 例子 3：内存透露
for (var i = 1; i <= 3; i++) {(function(j) {document.getElementById('button' + j).addEventListener('click', function() {console.log('Button' + j + 'clicked.');
    });
  })(i);
}

以上代码展现了柯里化和模块化两种闭包的利用场景，同时也包含了一个事件绑定场景下的内存透露问题。咱们在应用闭包时须要分外留神内存透露的危险，以确保程序性能和稳定性。

计时器

setTimeout 和 setInterval 是 JavaScript 中可用的两个计时事件。该 setTimeout 函数在给定工夫过来后执行，而在 setInterval 给定工夫距离内反复执行，这些计时器是内存透露的最常见起因。

如果在代码中设置循环计时器，计时器回调函数会始终放弃对 numbers 对象的援用，直到计时器进行：

function generateRandomNumbers(){const numbers = []; // huge increasing array
    return function(){numbers.push(Math.random());
    }
}
setInterval((generateRandomNumbers(), 2000));

要解决此问题，最佳实际就是在不须要计时器的时候革除它：

const timer = setInterval(generateRandomNumbers(), 2000); // save the timer
// on any event like button click or mouse over etc
clearInterval(timer); // stop the timer

Out of DOM reference

Out of DOM reference 示意已从 DOM 中删除但在内存中依然可用的节点。垃圾回收器无奈开释这些 DOM 对象，让咱们通过上面的示例来了解这一点：

let parent = document.getElementById("#parent");
let child = document.getElementById("#child");
parent.addEventListener("click", function(){child.remove(); // removed from the DOM but not from the object memory
});

在下面的代码中，在单击父元素时从 DOM 中删除了子元素，然而子变量依然持有内存，因为事件侦听器始终保持对 child 变量的饮用。为此，垃圾回收器无奈开释 child，会持续耗费内存。

一旦不再须要事件侦听器，应该立刻登记它们：

function removeChild(){child.remove();
}
parent.addEventListener("click", removeChild);
// after completing required action
parent.removeEventListener("click", removeChild);

理论案例

在理论我的项目开发中，稍有不慎，代码可能就会导致内存溢出的状况，借一些理论案例，讲一讲我是如何剖析内存溢出的。

死循环，局部变量导致内存溢出

当有些循环没有充分考虑到边界条件时，很容易陷入死循环，比方上面示例：

const getParentClassName = (element, fatherClassName) => {const classNames = [];
  let currentElement = element;

  if (fatherClassName) {
    while (!(currentElement?.className || "").includes(fatherClassName) &&
      currentElement !== document.body
    ) {classNames.push(currentElement?.className || "");
      currentElement = currentElement?.parentElement;
    }
  } else {while (currentElement !== document.body) {classNames.push(currentElement?.className || "");
      currentElement = currentElement?.parentElement;
    }
  }

  return classNames;
};

getParentClassName(null);

这段代码性能是收集两个元素间的类名，当参数 element=null 时，就陷入了死循环，每次遍历都会向 classNames 数组追加新值，最终导致内存溢出。

那这种状况要如何剖析定位呢？无妨先应用 Performance 可视化检测内存透露，如下：

从图中能够看出，getParentClassName 函数有限次的被调用，执行期间 JS Heap 内存占用始终攀升，内存得不到开释，但具体是哪些变量内存占用很高，无奈开释回收呢？

能够采集内存快照剖析内存分配情况。因为页面解体，会采集不到快照，因而代码块中加上如下管制：

let count = 0;
const getParentClassName = (element, fatherClassName) => {const classNames = [];
  let currentElement = element;

  if (fatherClassName) {
    while (!(currentElement?.className || "").includes(fatherClassName) &&
      currentElement !== document.body
    ) {classNames.push(currentElement?.className || "");
      currentElement = currentElement?.parentElement;
    }
  } else {while (currentElement !== document.body) {classNames.push(currentElement?.className || "");
      currentElement = currentElement?.parentElement;
      count++;
      if (count > 10000000) break;
    }
  }

  return classNames;
};

getParentClassName(null);

别离在代码第 30 行和第 36 行设置断点，代码执行到第 36 行，抉择“Heap snapshot”，点击“take snapshot”，生成第一个 snapshot。持续调试，代码运行到第 30 行，点击“take snapshot”，生成第二个 snapshot，记录两个断点执行过程的内存调配。

咱们能够看到这么一些堆照信息：

• Constructor 示意应用此构造函数创立的所有对象。
• Distance 应用最短的节点门路显示到根的间隔。
• Shallow size 对象本身占用内存的大小。通常只有数组和字符串的 shallow size 比拟大。以字节为单位。
• Retained size 对象自身连同其无奈从 GC Root 达到的相干对象一起删除后开释的内存大小。因而，如果 Shallow Size ~= Retained Size，阐明根本没怎么透露。而如果 Retained Size > Shallow Size，就须要多加留神了。以字节为单位

排查一下 Retained Size 值偏大的对象，很显著发现内存溢出是由变量 classNames 导致的。

上述是依照 Summary 模式查看快照，还有其余一些模式：

• Summary view 摘要视图，显示按构造函数名称分组的对象。应用它依据按构造函数名称分组的类型来搜寻对象（及其内存应用）。它对于追踪 DOM 透露特地有帮忙。
• Comparison view 比拟视图，显示两个快照之间的差别。应用它来比拟操作前后的两个（或多个）内存快照。查看开释内存和援用计数中的增量可让您确认内存透露的存在和起因。
• Containment view 蕴含视图，容许查看堆内容。它提供了一个更好的对象构造视图，帮忙剖析在全局命名空间（窗口）中援用的对象，以找出它们四周的起因。应用它来剖析闭包并深刻理解您的对象。
• Statistics view 统计视图，显示内存大小应用统计（扇形图）

另外，咱们还能够启用“Allocation instrumentation on timeline”模式，获取工夫线内存分配情况：

Mobx 将属性转换成可察看，导致内存溢出

有一个穿梭框组件在应用过程中产生内存溢出，不分明就其是什么起因引起的，先应用 Performance 可视化检测内存透露，如下：

能够看出内存占用飞速增长，咱们再放大看看具体是哪些脚本执行导致的：

具体察看能够发现，有反复可疑的代码片段之行过程中导致内存占用的增长。为了不便定位具体是哪些变量内存溢出，咱们找一个反复执行比拟频繁的函数做如下革新：

var defineObservablePropertyExeCount = 0;
function defineObservableProperty(target, propName, newValue, enhancer) {
    defineObservablePropertyExeCount += 1;
    if (defineObservablePropertyExeCount > 1000000) {return null;}
    var adm = asObservableObject(target);
    assertPropertyConfigurable(target, propName);
    if (hasInterceptors(adm)) {
        var change = interceptChange(adm, {
            object: target,
            name: propName,
            type: "add",
            newValue: newValue
        });
        if (!change)
            return;
        newValue = change.newValue;
    }
    var observable = (adm.values[propName] = new ObservableValue(newValue, enhancer, adm.name + "." + propName, false));
    newValue = observable.value; // observableValue might have changed it
    Object.defineProperty(target, propName, generateObservablePropConfig(propName));
    if (adm.keys)
        adm.keys.push(propName);
    notifyPropertyAddition(adm, target, propName, newValue);
}

加上一个执行次数的管制，在此处打上断点，而后等代码执行到此处，点击“take snapshot”录制就能够失去上面内存分配情况：

从图中能够发现，ObservableValue 类型和 ObservableObjectAdministration 类型对象占用内存很高，根本能够判定由它们引发内存透露的。

点击查看每一个 ObservableValue 类型对象，发现都是 next 和 nextBrother 对象，在我的项目全局搜寻这两个关键字，根本都是指向 IFlatTree 树状构造：

export interface IFlatTree extends ITree {
    parent?: IFlatTree;
    level?: number;
    next?: IFlatTree;
    nextBrother?: IFlatTree;
    show?: boolean;
}

这个树状数据是由穿梭框组件 onchange 回调函数抛出的，而后代码将其存入 Mobx 状态治理仓库中

Mobx 会对存入的变量深度遍历，每个属性都进行 Observable 封装

然而，这个树状构造有 37 层，每个节点对象的每个属性都要 Observable 封装，执行过程中产生内存耗费足以导致内存溢出

进一步剖析发现，next 和 nextBrother 节点对象并不会在理论业务逻辑中应用到，而且也不会改变，所以咱们能够只将树状数据的单层进行 Observable 封装，不对其深度遍历。

依据下面解决后，想着在 onchange 回调打印 values，发现 console.log 打印也可能会导致内存溢出，打印的变量不会被垃圾回收器回收。起因能够参考这篇文章，千万别让 console.log 上生产！用 Performance 和 Memory 通知你为什么

参考

内存治理
如何防止 JavaScript 中的内存透露
调试 JavaScript 内存透露
应用 Chrome 查找 JavaScript 内存透露
修复内存问题
什么是闭包？闭包的作用? 闭包会导致内存透露吗？
JavaScript 的工作原理：内存治理 + 如何解决 4 个常见的内存透露
应用 Chrome Devtools 剖析内存问题
手把手教你排查 Javascript 内存透露