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);
}
资源评论
weixin_38655347
- 粉丝: 9
- 资源: 919
最新资源
- 基于Java的奖励养成类蓝牙联机游戏.zip
- 基于Java+Swing的石头剪刀布游戏.zip
- Java作战小游戏.zip学习资料程序大作业
- Easyx的小游戏，飞翔的小鸟
- Tetris GUI game based on Java language development(基于Java语言开发的俄罗斯方块GUI小游戏 ).zip
- html常规学习.zip资源资料用户手册
- Semester Examination Works. 烟台科技学院，智能工程学院，Java编程基础课设 Java打字游戏.zip
- PingFang SC、HK、TC（Win 完美协作-修改版）.apk
- 64edf716dbff6a93a2ca0b5636e312da1722606914910.jpg.jpg
- mmexport1726895720568.jpg
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
