Js内存泄漏情况解析

---

一、内存泄漏

  内存泄漏，指在JS中已经分配内存地址的对象由于长时间未进行内存释放或无法清除，造成了长期占用内存，使得内存资源浪费，最终导致运行的应用响应速度变慢以及最终崩溃的情况。

二、常见原因

1.意外的全局变量

  由于垃圾回收机制的存在，局部变量在函数调用完后会进行判断并回收，而如果是全局变量的话那就很难判断该变量什么时候不去使用，导致无法正常回收。以下两种情况下将导致程序产生无法回收的全局变量：
（1）未声明直接赋值
js在非严格模式下允许对未声明的变量进行赋值，因此就造成了如下情况：

function fun() {
	a = 10;
}
fun();
console.log(a);     // 10 
1
2
3
4
5

由于未对变量a声明而直接赋值，则变量a默认为全局变量，可见在函数执行后变量a未被回收
（2）this创建的全局变量

function fun() {
	this.b = 20;   
}
fun();	 // 函数全局环境下执行：this 指向 window
console.log(b);     // 20 
1
2
3
4
5

函数在全局环境下执行导致了this指向window，变量b成为了全局变量，未被回收
解决：使用js的严格模式：‘use strict’

2.未被清空的定时器

定义如下结构

<div class="main">
	<div class="test">俺即将被移除div>
div>
1
2
3

设置定时器，2s后移除子节点

var main = document.querySelector('.main');
var test = document.querySelector('.test');
setInterval(() => {
	main.removeChild(test);
}, 2000)
1
2
3
4
5

子节点清除后控制台可见定时器还在不停地走。当定时器不要时，内部的回调也不再需要，若不及时移除定时器，内部的回调函数中的数据将不会被回收，导致了内存泄漏。

解决：移除不用的定时器

var timer = setInterval(() => {
	main.removeChild(test);
	test = null;	// 及时释放不用的全局变量
	clearInterval(timer);	// 移除定时器
}, 2000);
1
2
3
4
5

3.滥用闭包

  内部函数保存了局部变量name，以至于在函数setName执行完毕后，局部变量name未能被销毁，仍未被回收，可以在外部被访问，最终导致了内存泄漏。

function setName(name) {
	function sayName() {
		console.log(name);
	}
	return sayName;
}
const fn = setName('Tom');
fn();   // Tom
1
2
3
4
5
6
7
8

  闭包是能使变量常驻在内存中，这个是他的优点，但如果滥用闭包的话这个就变成了他的缺点。因为如果大量使用闭包存储变量，那么就会增加内存的消耗。
解决：由于内部函数sayName在外部被全局变量fn引用，故：fn = null

const fn = setName('Tom');
fn = null;
fn();   // Error:fn is not a function
1
2
3

4.未被销毁的事件监听

  前提：注册事件监听函数时，不应当使用匿名函数，一旦将匿名函数添加到全局的事件监听当中，会导致无法销毁这个监听事件。
  原因：函数名会作为销毁监听事件时的索引，但是匿名函数没有函数名，所以我们也就无法获得其索引，也就无法销毁监听事件。

function showInfo() {
	console.log('我是可以被销毁的监听函数!');
}
// 正确做法
document.addEventListener('click', showInfo);
document.removeEventListener('click', showInfo);
// 该监听事件无法被销毁
document.addEventListener('click', () => {
	console.log('我是无法被销毁的匿名函数!');
});
1
2
3
4
5
6
7
8
9
10

  注意：销毁事件监听时，参数要与创建时保持一致

// 正确做法
document.addEventListener('click', showInfo);
document.removeEventListener('click', showInfo);
document.addEventListener('click', showMsg, true);
document.removeEventListener('click', showMsg, true);
// 错误做法
document.addEventListener('click', showMsg, true);
document.removeEventListener('click', showMsg);
1
2
3
4
5
6
7
8

5.无效的Dom引用

  Dom节点删除了，但是节点的引用还在，导致无法对其所占内存的回收，如上文第二个情况中，若不删除Dom节点的引用，无效的Dom引用将继续常驻在内存中：

var timer = setInterval(() => {
	main.removeChild(test);		// 删除 Dom 节点
	clearInterval(timer);	// 移除定时器
}, 2000);
console.log(test);		// 
俺即将被删除
1
2
3
4
5

解决：同上文第二个情况中，给删除的DOM节点引用设置为null

var timer = setInterval(() => {
	main.removeChild(test);		// 删除 Dom 节点
	test = null;	// 删除无效的Dom引用
	clearInterval(timer);	// 移除定时器
}, 2000);
console.log(test);		// null
1
2
3
4
5
6

---