谈一谈我在前端开发的时候遇到的过的内存泄漏

其实无论在开发什么，或多或少都会遇到内存泄漏。但是究其根本，问题大多都是存在于代码的缘故，作为一名有追求的开发人员，我们不仅要追求功能，更要追求代码的性能。今天我就抽点时间来谈谈所谓的内存泄漏。

###一、 什么是内存泄漏 有点程序基础的知道，程序的运行是需要分配内存空间的。而对于一个持续使用的网页端来说，如果一些不能用到的内存没有被及时释放，这就叫 内存泄漏 。但是我们都知道，我们网页端的承载量是有限的，不断的往一个气球里面不断吹气，气球总有吹爆的一刻。浏览器的表现就是浏览器崩溃。

：垃圾回收器会定期扫描内存，当某个内存中的值被引用为零时就会将其回收。当前变量已经使用完毕但依然被引用，导致垃圾回收器无法回收这就造成了内存泄漏。

###三、内存泄漏的识别办法 对于内存泄漏识别办法，我主要是从阮大神的博客里面学习到的。主要有：浏览器和命令行两种

3.1、 浏览器

• 首先打开chrome，然后按下f12（windows）/option+command+i打开调试工具，选择memory。
• 根据下面的视图我们看到一共有 Heap snapshot（JS堆快照) , Allocation instrumentation on timeline（JS堆分配时间线） , Allocation sampling 三种堆快照类型
• 开始录制前先点击垃圾回收，再点击录制，单如果是js堆内存动态分配时间线的话，结束之前要再次点击下垃圾回收，再结束录制。

  

3.1.1

• Summary 总览视图：按构造函数分组。用于捕捉对象及其使用的内存。对于定位DOM内存泄露特别有用。
• Comparison 对比视图：对比两个快照。用于对比不同操作之后的堆快照，查看内存的释放及引用计数，来分析内存是否泄露及其原因。
• Containment 内容视图：查看堆内容。更适合查看对象结构，有助于分析对象的引用情况。适用于分析闭包以及深入分析对象。  + Statistics 统计视图：总览堆的统计信息。

3.1.1.1、 Summary总览视图

• Constructor：构造函数，节点下的对象都是由改构造函数创建而来。
• Distance：与根节点的距离。
• Objects Count：对象个数及百分占比。
• Shallow size：对象的直接内存总数，直接内存是指对象自身占用的内存大小。
• Retained size：对象的最大保留内存，保留内存是指对象被删除后可以释放的那部分内存。

点击展开构造函数，可以看到所有构造函数相关的对象实例，@后面的数字是该对象实例的唯一标识符。

常见的顶层构造函数：

• (global property)：全局对象和普通对象的中间对象，和常规思路不同。比如在Window上定义了一个Person对象，那么他们之间的关系就是[global] => (global property) => Person。之所以使用中间对象，是出于性能的考虑。
• (closure)：使用函数闭包的对象。
• (array, string, number, regexp)：一系列对象类型，其属性指向Array/String/Number/Regexp。
• HTMLDivElement/HTMLAnchorElement/DocumentFragment：元素的引用或者代码引用的指定文档对象。

3.1.2 Comparasion对比视图

为了验证特定操作会不会引起内存泄露，对比快照的步骤如下： 1、无任何操作，拍第一个堆快照 2、执行你觉得可能造成内存泄露的操作，再执行相反操作 3、拍第二个堆快照，切换到对照视图，并且指定与第一个堆快照对比

3.1.2 JS堆分配时间线

通过Allocation instrumentation on timeline可以持续的记录堆分配的情况，显示了对象在什么时候被创建、什么时候存在内存泄漏等。

上面的柱条表示堆中生成的新对象。高度表示这个对象的大小，颜色表示这个对象的内存释放情况：蓝色柱表示这个对象在timeline中生成，结束前仍然存在；灰色柱表示这个对象在timeline中生成，但结束前已经被回收了。 我们可以重复执行某个动作，如果最后有不少蓝色柱被保留，这些蓝色柱就是潜在的内存泄露问题。 如果左边的意料之外的蓝条，那么极有可能存在内存泄露。

上面是Vue项目反复切换两个录制的堆分配行为，我们可以聚焦到某一次堆分配，查看具体对象信息。可以在柱状图中滑动鼠标滚轮查看某段时间的堆分配。比如上面发现有三个VueComponent没有回收。点击展开查看详细信息。发现这三个组件的信息都是一样的，那就是组件没有释放。首先确认组件是否被销毁。如果已销毁，确认事件是否解绑、定时器是否取消，特别注意事件总线绑定的事件一定要解绑。

3.2、 命令行

命令行可以使用 Node 提供的 process.memoryUsage 方法。 process.memoryUsage 返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。

• rss（resident set size）：所有内存占用，包括指令区和堆栈。
• heapTotal："堆"占用的内存，包括用到的和没用到的。
• heapUsed：用到的堆的部分。
• external： V8 引擎内部的 C++ 对象占用的内存。

判断内存泄漏，以heapUsed字段为准。

###四、vue中存在的内存泄漏 由于在vue单页面中，页面进行跳转的时候没有刷新页面，这就造成了内存泄漏不断堆积，导致页面卡顿或者页面崩溃。这里主要介绍我在开发的时候遇到的一些内存泄漏情况。 ####4.1、 闭包

function closure(){
    var element = document.getElementById('mydiv');//element用完之后一直驻留在内存中
    var test = element.innerHTML;
    element.onclick = function () {
        alert(test);//这里用element导致内存泄露
    };
}
closure();

function closure(){
    var element = document.getElementById('mydiv');
    var test = element.innerHTML;
    element.onclick = function () {
         alert('test');
    };
    element = null;//这里直接回收了
}
复制代码

####4.2、 意外的全局变量

function foo(arg) {
    bar = "aaaaa";
}
 
实际上等价于
function foo(arg) {
    window.bar = "aaaaa";
}
复制代码

这种情况是很多人都会见到的，我建议是使用es6的let或者是使用严格模式。 ####4.3、 定时器

var data=getData();  
setInterval(function(){  
    var node=document.getElementById("name");  
    if(node){  
        node.innerHTML=JSON.stringify(data)  
    }  
},1000)  
复制代码

####4.4、 在生命周期中使用全局事件，然后没有做释放处理

onCreate(){
  bus.%on('')
},
beforeDestroy() {
  bus.$off('****');
}
复制代码

####4.5、 dom对象和js对象的互相引用，未置空

var obj = {}; 
document.getElementById('idname').property = testObject;  //obj会一直存在直到dom被回收，这可能会造成内存泄漏
复制代码

解决办法：

window.onunload=function(){
    document.getElementById('idname').property = null;         //释放内存
};
复制代码

####4.6、 keep-alive组件 在移除元素时的时候，如果你打算在内存中保留状态和元素该怎么做呢？这种情况下，你可以使用内建的 keep-alive组件。 当你用 keep-alive 包裹一个组件后，它的状态就会保留，因此就留在了内存里。

<button @click="show = false">Hide</button>
<keep-alive>
  <!-- `<my-component>` 即便被删除仍会刻意保留在内存里 -->
  <my-component v-if="show"></my-component>
</keep-alive>
复制代码

这个技巧可以用来提升用户体验。例如，设想一个用户在一个文本框中输入了评论，之后决定导航离开。如果这个用户之后导航回来，那些评论应该还保留着。

一旦你使用了 keep-alive，那么你就可以访问另外两个生命周期钩子：activated 和 deactivated。如果你想要在一个 keep-alive 组件被移除的时候进行清理或改变数据，可以使用 deactivated 钩子。

deactivated: function () {
  // 移除任何你不想保留的数据
}
复制代码

####4.7、echarts引起的内存泄漏 解决方案

chart.dispose(myChart)
   myChart = chart.init(document.getElementById(dom));
  myChart.setOption(option);
复制代码

说在最后

其实所谓的内存泄漏，无非就是用过的东西没有及时的回收 导致部分内存长期被占用，一个优秀的 程序员 是不回让内存长期保持高占用的状态的。虽然前端只管实现和页面效果，但是深究起页面性能还是有点说法的。作为一名有追求的程序员，还是希望自己能够多多注意这些方面，多多提升自己在敲代码的时候的专业知识积累。