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

1,479 阅读7分钟

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

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

不断鼓气的气球
###二、 js的垃圾回收机制 js中的内存回收机制采用的是引用计数:垃圾回收器会定期扫描内存,当某个内存中的值被引用为零时就会将其回收。当前变量已经使用完毕但依然被引用,导致垃圾回收器无法回收这就造成了内存泄漏。
引用计数示意图

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

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);

说在最后

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