快三怎么玩法介绍:vue使用中的内存泄漏【推荐】

北京快三走势图 www.mxld9.cn  更新时间:2018年07月10日 15:56:42   作者:李银城   我要评论

内存泄露是指new了一块内存,但无法被释放或者被垃圾回收。这篇文章主要介绍了vue使用中的内存泄漏,需要的朋友可以参考下

今天看到一篇关于js使用中内存泄露的文章,以及chrom浏览器查看内存泄漏的方法,决定留着。本文只截取了我认为比较重要的部分,喜欢原文的小伙伴,请点击文章下方的原文链接。

什么是内存泄露?内存泄露是指new了一块内存,但无法被释放或者被垃圾回收。new了一个对象之后,它申请占用了一块堆内存,当把这个对象指针置为null时或者离开作用域导致被销毁,那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null,且代码里面没办法再获取到这个对象指针了,就会导致无法释放掉它指向的内存,也就是说发生了内存泄露。为什么代码里面会拿不到这个对象指针了呢,举一个例子:

// module date.js
let date = null;
export default {
 init () {
  date = new Date();
 }
}
// main.js
import date from 'date.js';
date.init();

在main.js初始化了date之后,date这个变量就一会直存在了,直到你把页面关了,因为date的引用是在另一个module里面,可以理解为??榫褪且桓霰瞻酝馐遣豢杉?。所以如果你是希望这个date对象一直存在、需要一直使用的话,那么没有问题,但是如果想用一次就不用了那就会有问题,这个对象一直在内存里面没有被释放就发生了内存泄露。

另一种比较隐蔽并且很常见的内存泄露是事件绑定,形成了一个闭包,导致一些变量一直存在。如下例子所示:

// 一个图片懒惰加载引擎示例
class ImageLazyLoader {
 constructor ($photoList) {
  $(window).on('scroll', () => {
   this.showImage($photoList);
  });
 }
 showImage ($photoList) {
  $photoList.each(img => {
   // 通过位置判断图片滑出来了就加载
   img.src = $(img).attr('data-src');
  });
 }
}
// 点击分页的时候就初始化一个图片懒惰加载的
$('.page').on('click', function () {
 new ImageLazyLoader($('img.photo'));
});

这是一个图片懒惰加载的模型,每次点分页的时候就会清掉上一页的数据更新为当前页的DOM,并重新初始化一个懒惰加载的引擎。它里面监听了scroll事件,对传进来的图片列表的DOM进行处理。每点一次分页就会重新new一个,这里就发生了内存泄露,主要是以下3行代码导致的:

$(window).on('scroll', () => {
 this.showImage($photoList);
});

因为这里的事件绑定形成了一个闭包,this/$photoList这两个变量一直没有被释放,this是指向ImageLazyLoader的实例,而$photoList是指向DOM结点,当清除掉上一页的数据的时候,相关DOM结点已经从DOM树分离出来了,但是仍然还有一个$photoList指向它们,导致这些DOM结点无法被垃圾回收一直在内存里面,就发生了内存泄露。由于this变量也被闭包困住了没有被释放,所以还有一个ImageLazyLoader的实例发生内存泄露。

这个的解决方法比较简单,就是销毁实例的时候把绑定的事件off掉,如下代码所示:

class ImageLazyLoader {
 constructor ($photoList) {
  this.scrollShow = () => {
   this.showImage($photoList);
  };
  $(window).on('scroll', this.scrollShow);
 }
 // 新增一个事件解绑       
 clear () {      
  $(window).off('scroll', this.scrollShow);
 }
 showImage ($photoList) {
  $photoList.each(img => {
   // 通过位置判断图片滑出来了就加载
   img.src = $(img).attr('data-src');
  });
  // 判断如果图片已全部显示,就把事件解绑了
  if (this.allShown) {
   this.clear();
  }
 }
}
// 点击分页的时候就初始化一个图片懒惰加载的
let lazyLoader = null;
$('.page').on('click', function () {
 lazyLoader && (lazyLoader.clear());
 lazyLoader = new ImageLazyLoader($('img.photo'));
});

在每次实例化一个ImageLazyLoader之前把先把上一个实例clear掉,clear里面进行解绑,由于JS有构造函数但是没有解构函数,所以需要自己写一个clear,在外面手动调一下clear。同时在事件的执行过程的合适时机自动把事件给解绑了,上面是判断如果所有的图片都展示出来了那么就没必要监听scroll事件了直接解绑了。这样就能解决内存泄露的问题了,能够触发自动垃圾回收。

为什么把事件解绑了,就不会有闭包引用了呢?因为JS引擎检测到那个闭包没用了,就把那个闭包销毁了,那么闭包引用的外部变量也自然会被置空。

好了,基础知识就讲解到这里,现在用Chrome devtools的内存检测工具来实际操作一遍,方便发现页面的一些内存泄露行为。为了避免装给浏览器装的一些插件造成影响,使用Chome的隐身模式页面,它会把所有的插件都给禁掉。

然后打开devtools,切到Memory的tab,选中Heap snapshot,如下所示:

 

什么叫heap snapshot呢?翻译一下就是堆快照,给当前内存堆拍一张照片。因为动态申请的内存都是在堆里面的,而局部变量是在内存栈里面,是由操作系统分配管理的是不会内存泄露了。所以关心堆的情况就好了。

然后做一些增删改DOM的操作,如:

(1)弹一个框,然后把弹框给关了

(2)单页面的点击跳转到另一个路由,然后再点后退返回

(3)点击分页触发动态改DOM

就是先增加DOM,然后把这些DOM给删了,看一下这些被删除的DOM是否还有对象引用它们。

这里我是第2种方式的场景,检测单页面应用的某个路由页面是否存在内存泄露。先打开首页,点到另一个页面,再点后退,接着点一下垃圾回收的按钮:

 

触发垃圾回收,避免一些不必要的干扰。

然后再点一下拍照按钮:

 

它就会把当前页面的内存堆扫描一遍显示出来,如下图所示:

 

然后在上面中间的Class Filter的搜索框里搜一下detached:

 

它就会显示所有已经分离了DOM树的DOM结点,重点关注distance值不为空的,这个distance表示距离DOM根结点的距离。上图展示的这些div具体是啥呢?我们把鼠标放上去不动等个2s,它就会显示这个div的DOM信息:

 

通过className等信息可以知道它就是那个要检查的页面的DOM节点,在下面的Object的窗口里面依次展开它的父结点,可以看到它最外面的父结点是一个VueComponent实例:

 

下面黄色字体native_bind表示有个事件指向了它,黄色表示引用仍然生效,把鼠标放到native_bind上面停留2秒:

它会提示你是在homework-web.vue这个文件有一个getScale函数绑定在了window上面,查看一下这个文件确实是有一个绑定:

mounted () {
 window.addEventListener('resize', this.getScale);
}

所以虽然Vue组件把DOM删除了,但是还有个引用存在,导致组件实例没有被释放,组件里面又有一个$el指向DOM,所以DOM也没有被释放。

要在beforeDestroyed里面解绑的

beforeDestroyed () {
 window.removeEventListener('resize', this.getScale);
}

所以综合上面的分析,造成内存泄露的可能会有以下几种情况:

(1)监听在window/body等事件没有解绑

(2)绑在EventBus的事件没有解绑

(3)Vuex的$store watch了之后没有unwatch

(4)??樾纬傻谋瞻诓勘淞渴褂猛旰竺挥兄贸蒼ull

(5)使用第三方库创建,没有调用正确的销毁函数

并且可以借助Chrome的内存分析工具进行快速排查,本文主要是用到了内存堆快照的基本功能,读者可以尝试分析自己的页面是否存在内存泄漏,方法是做一些操作如弹个框然后关了,拍一张堆快照,搜索detached,按distance排序,把非空的节点展开父级,找到标黄的字样说明,那些就是存在没有释放的引用。也就是说这个方法主要是分析仍然存在引用的游离DOM节点。因为页面的内存泄露通常是和DOM相关的,普通的JS变量由于有垃圾回收所以一般不会有问题,除非使用闭包把变量困住了用完了又没有置空。

DOM相关的内存泄露通常也是因为闭包和事件绑定引起的。绑了(全局)事件之后,在不需要的时候需要把它解绑。当然直接绑在div上面的可以直接把div删了,绑在它上面的事件就自然解绑了。

您可能感兴趣的文章:

相关文章

  • Vue 路由切换时页面内容没有重新加载的解决方法

    Vue 路由切换时页面内容没有重新加载的解决方法

    今天小编就为大家分享一篇Vue 路由切换时页面内容没有重新加载的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue导出html、word和pdf的实现代码

    vue导出html、word和pdf的实现代码

    这篇文章主要介绍了vue导出html、word和pdf的实现方法,文中完成了三种文件的导出但是还有很多种方法,小编就不给大家一一列举了,需要的朋友可以参考下
    2018-07-07
  • vue自定v-model实现表单数据双向绑定问题

    vue自定v-model实现表单数据双向绑定问题

    vue.js的一大功能便是实现数据的双向绑定。这篇文章主要介绍了vue自定v-model实现 表单数据双向绑定的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 解析Vue.js中的组件

    解析Vue.js中的组件

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue.js 中的组件,需要的朋友参考下
    2018-02-02
  • Vue.js路由组件vue-router使用方法详解

    Vue.js路由组件vue-router使用方法详解

    这篇文章主要为大家详细介绍了Vue.js路由组件vue-router使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue绑定设置属性的多种方式(5)

    vue绑定设置属性的多种方式(5)

    这篇文章主要为大家详细介绍了vue绑定设置属性的多种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue 中swiper的使用教程

    vue 中swiper的使用教程

    本文通过实例代码给大家介绍了vue 中swiper的使用,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue中v-for加载本地静态图片方法

    vue中v-for加载本地静态图片方法

    下面小编就为大家分享一篇vue中v-for加载本地静态图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解基于Vue-cli搭建的项目如何和后台交互

    详解基于Vue-cli搭建的项目如何和后台交互

    这篇文章主要介绍了详解基于Vue-cli搭建的项目如何和后台交互,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue.js中toast用法及使用toast弹框的实例代码

    vue.js中toast用法及使用toast弹框的实例代码

    这篇文章主要介绍了vue.js中toast用法及使用toast弹框的实例代码,本文给大家介绍的非常详细,具有一定的参考借鉴加载,需要的朋友可以参考下
    2018-08-08

最新评论

  • 把市场经济说成计划经济是不是痴呆病? 2018-12-18
  • 山西省重要党务政务信息新闻发布会——黄河新闻网 2018-12-17
  • 黄坤明会见澳门新闻界高层访京团 2018-12-16
  • 你把我抱紧 我帮你扶伞 2018-12-16
  • 最高人民法院首次发布禁毒工作白皮书 2018-12-15
  • 高考背后,他们默默付出(组图)【3】 2018-12-15
  • 一家人写14万字介绍白云山花草 2018-12-14
  • 正定--河北频道--人民网 2018-12-14
  • 北京工业大学:突出‘京味’、体现‘京韵’,加快世界一流大学和一流学科建设 2018-12-13
  • 把握和传承好“变则通”思想(大家手笔) 2018-12-12
  • 英国歌手世界杯开幕比不雅手势 恐遭逮捕并罚款5万 2018-12-11
  • 一图到底3分钟读懂上合峰会医疗保障,为何青睐这里 2018-12-11
  • 白岩松康辉撒贝宁欧阳夏丹 揭秘央视主播成功秘诀 2018-12-10
  • 女足热身不敌美国队 队员总结收获多 2018-12-09
  • 只要等一等就能多“等”出8600万美元! 2018-12-08
  • 426| 487| 631| 842| 852| 879| 307| 894| 109| 374|