js内存泄漏详解

JavaScript常见内存泄漏原因及其解决方式

内存泄漏的定义

本质上来说，即是那些无法被应用所使用但又没有被浏览器回收的内存。

 

JavaScript中的内存管理机制

首先，JS是支持GC语言的，这类语言可以帮助程序猿们自动的管理内存，并且可以定期去检查内存的分配情况。

 

在js中，无效的引用代码中本应释放的已经引用的内存却没有释放的变量，就会造成内存泄漏现象

对于内存使用控制可以极大的提高浏览器使用效率，间接的提高用户的体验程度。

 

常见的JS内存泄漏

1.不带var或者let去定义变量

例如：

function error1(){
str1 = "我造成了内存泄漏"
}

等价于：

function error1() {

window.str1 = "我造成了内存泄漏"

}

 

 

如何仅仅是为了把str1作为函数中的一个临时变量，不用var 或者 let定义就会产生一个全局变量，从而这块内存就会产生泄露。

当然在这种单个字符串的定义不会造成太大的影响。但是在实际工作中由于代码的数量过多可能会造成大量的代码排查时间。

 

解决方案推荐：

使用js严格模式进行开发， ‘use strict’; 这样会对这种为按照规范写的代码报错进行排查。

 

 

2.由于闭包引起的内存泄漏

例如：(来自百度的经典例子)

function say667() {
var num = 666; //此变量被闭包所使用，无法回收
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayNumber = say667();
sayNumber(); // alerts 667

 

3.dom清空或删除，事件未清除导致

	$('#container').bind('click', function(){
    		console.log('click');
	}).remove();
	// zepto 和原生 js下，#container dom 元素，还在内存里jquery 的 empty和 remove会帮助开发者避免这个问题

	$('#container').bind('click', function(){
    		console.log('click');
	}).off('click').remove();
	//把事件移除即可，切记不可用unbind('click')

 

4.子元素存在引用引起的（来自网络的大神一张图片足以说明）

 

 

 

• 黄色是指直接被 js变量所引用，在内存里
• 红色是指间接被 js变量所引用，如上图，refB 被 refA 间接引用，导致即使 refB 变量被清空，也是不会被回收的
• 子元素 refB 由于 parentNode 的间接引用，只要它不被删除，它所有的父元素（图中红色部分）都不会被删除