浅谈前端中的内存泄漏

一、内存泄漏的概念

不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)
程序的运行需要内存,只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。
大多数语言提供自动内存管理,而不需要程序员手动释放内存,这被称为垃圾回收机制(garbage collector)

二、JavaScript 的垃圾回收机制

JavaScript中最常用的垃圾收集方式是标记清除(mark-and-sweep)。当变量进入环境(例如,在函数中声明一个变量)时,就将这个变量标记为“进入环境”
从逻辑上讲,永远不能释放进入环境的变量所占的内存,因为只要执行流进入相应的环境,就可能用到它们。而当变量离开环境时,这将其标记为“离开环境”

三、常见的内存泄漏

1、全局变量引起的内存泄漏
在JS中定义的全局变量是不会被销毁的,因为随时都可能会用到这个变量,所以不能被销毁。
当全局变量未被设置为 null 或者未被重新定义时,无法被回收。
与全局变量相关的、增加内存消耗的一个主因是缓存。缓存数据是为了重用,缓存必须有一个大小上限才有用。高内存消耗导致缓存突破上限,因为缓存内容无法被回收。

function leaks(){  
    leak = 'xxxxxx';    //leak 成为一个全局变量,不会被回收
}

解决方法:当全局变量用于临时存储或处理大量数据时,需要确保用完以后及时把它设置为 null 或者重新定义。
2、闭包引起的内存泄漏
闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量

var leaks = (function(){  
    var leak = 'xxxxxx';// 被闭包所引用,不会被回收
    return function(){
        console.log(leak);
    }
})()

//'xxxxxx'

3、DOM导致的内存
DOM清空或删除时,事件未清除导致的内存泄漏:

<div id="container"></div>
$('#container').bind('click', function(){
    console.log('click');
});

$('#container').remove();//事件未清除,内存泄漏

解决方法:清除绑定的事件,即可从内存中移除

<div id="container"></div>
$('#container').bind('click', function(){
    console.log('click');
});

$('#container').off('click').remove();

DOM子元素存在引用,引起的内存泄漏:
假如 JavaScript 代码中保存了表格某一个 <td> 的引用。将来决定删除整个表格的时候,直觉认为 GC 会回收除了已保存的 <td> 以外的其它节点。
实际情况并非如此:此<td> 是表格的子节点,子元素与父元素是引用关系。由于代码保留了 <td> 的引用,导致整个表格仍待在内存中。

var select = document.querySelector;
var tree = select('#tree');
var leaf = select('#leaf');   //在COM树中leaf是tree的一个子结点

select('body').removeChild(tree);//tree不能被回收,因为leaf 还在

解决方法:需要在父元素移除之前,移除子元素的引用。

select('body').removeChild(leaf).removeChild(tree);

4、被遗忘的计时器或回调函数
如果 id 为 Node 的元素从 DOM 中移除,该定时器仍会存在。同时因为回调函数中包含对 someResource 的引用,所以定时器外面的 someResource 也不会被释放。

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // 处理 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000);

解决方法:清除定时器和回调函数

var someResource = getData(); 
var timer = function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // 处理 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
};
setInterval(timer, 1000);
window.clearInterval(timer);

四、如何避免内存泄漏

1、减少不必要的全局变量,或者生命周期较长的对象,及时对无用数据进行垃圾回收;
2、注意程序逻辑,避免“死循环”引用 ;
3、避免创建过多的对象,遵循原则:不使用的东西要及时归还。

引申:
什么是内存溢出(out of menory)?

内存溢出(out of memory):程序要求的内存,超出了系统所能分配的范围。如:用一个int型4字节的数据来装一个float型8字节的数据,就会产生内存溢出。在编程上,可以强制类型转换int XX = (int)float;只取float 4字节数据给int。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容