JavaScript 中内存泄漏-2一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情。

内存泄漏场景

ES6 Set 成员：

设置引用类型的时候，设置结束，需 设为null

//	造成内存泄漏用法（成员是引用类型的，即对象）
let map = new Set();
let value = { test: 22};
map.add(value);

value= null;

//	正确使用方式
let map = new Set();
let value = { test: 22};
map.add(value);

map.delete(value);
value = null;

WeakSet 的成员是弱引用，更便捷

let map = new WeakSet();
let value = { test: 22};
map.add(value);

value = null;

ES6 Map 键名：

//	造成内存泄漏用法（key值是引用类型的，即对象）
let map = new Map();
let key = new Array(5* 10);
map.set(key, 1);
key = null;

//	正确使用方式
let map = new Map();
let key = new Array(5 * 10);
map.set(key, 1);

map.delete(key);
key = null;

//	WeakMap 的键名是弱引用，更便捷
let map = new WeakMap();
let key = new Array(5 * 10);
map.set(key, 1);

key = null;

mounted/created 钩子中使用了 $on，需要在beforeDestroy 中做对应解绑($ off)处理：（vue）

beforeDestroy() {
 this.bus.$off('****');
}

给DOM对象添加的属性是一个对象的引用：

var testObject = {}; 
document.getElementById('xxx').property = testObject;

//释放内存
window.onunload=function(){
  document.getElementById('xxx').property = null;     
};

chrome排查内存泄漏

打开谷歌开发者工具，切换至 Performance 选项，勾选 Memory 选项，在页面上点击运行按钮，然后在开发者工具上面点击左上角的录制按钮，通过内存走势图判断当前页面是否有内存泄漏。

查找内存泄漏出现的位置：

打开谷歌开发者工具，切换至 Memory 选项。页面上点击运行按钮，然后点击开发者工具左上角录制按钮，录制完成后继续点击录制，直至录制完三个为止。然后点击页面的停止按钮，再连续录制 3 次内存（不要清理之前的录制）。

按照 Shallow Size 进行逆序排序，对内存占用较高的变量进行排查：

JavaScript 中内存泄漏-2