前言
内存泄漏问题,对于 Web H5 开发者来说,因为每次刷新页面,浏览器就会将当前页面的内存进行释放,影响较小。但是,对于持续不间断执行的程序,比如Nodejs。如果存在内存泄漏问题,那么内存占用会随着时间影响越来越大,直至达到内存限制,进程崩溃。
常见的内存泄漏场景
内存泄漏问题,一般是因为 GC 导致未使用的内存,没有及时被释放造成的。而容易导致内存泄漏的地方,主要是指堆内存区域。
1、循环引用
下面的例子是两个对象,互相引用对方。如果持续调用下面的函数,会导致内存不断升高。
function f() {
var objA = {
reference: null,
value: new Array(1000).fill("*")
}
var objB = {
reference: null,
value: new Array(1000).fill("*")
}
objA.reference = objB
objB.reference = objA
return objA
}
f()
可以看到,连续调用之后,堆内存占用越来越高,没有及时释放,这样就造成了内存泄漏。
2、定时器
var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
// 处理 node 和 someResource
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
这样的代码很常见,如果id为Node的元素从DOM中移除,该定时器仍会存在,同时,因为回调函数中包含对someResource的引用,定时器外面的someResource也不会被释放。
3、闭包
function bindEvent(){
var obj=document.createElement('xxx')
obj.onclick=function(){
// Even if it is a empty function
}
}
闭包可以维持函数内局部变量,使其得不到释放。上例定义事件回调时,由于是函数内定义函数,并且内部函数–事件回调引用外部函数,形成了闭包。
// 将事件处理函数定义在外面
function bindEvent() {
var obj = document.createElement('xxx')
obj.onclick = onclickHandler
}
// 或者在定义事件处理函数的外部函数中,删除对dom的引用
function bindEvent() {
var obj = document.createElement('xxx')
obj.onclick = function() {
// Even if it is a empty function
}
obj = null
}
4、DOM 引用
有时,保存 DOM 节点内部数据结构很有用。假如你想快速更新表格的几行内容,把每一行 DOM 存成字典(JSON 键值对)或者数组很有意义。此时,同样的 DOM 元素存在两个引用:一个在 DOM 树中,另一个在字典中。将来你决定删除这些行时,需要把两个引用都清除。
var elements = {
button: document.getElementById('button'),
image: document.getElementById('image'),
text: document.getElementById('text')
};
function doStuff() {
image.src = 'http://some.url/image';
button.click();
console.log(text.innerHTML);
}
function removeButton() {
document.body.removeChild(document.getElementById('button'));
// 此时,仍旧存在一个全局的 #button 的引用
// elements 字典。button 元素仍旧在内存中,不能被 GC 回收。
}
虽然我们用removeChild移除了button,但是还在elements对象里保存着#button的引用,换言之,DOM元素还在内存里面。
垃圾回收场景优化
1. 数组复用
let arr = [1,2,3]
// 数组清空
arr.length = 0
// arr = []
// 上面的操作也能置空,但是同时又在堆上创建了一个空数组
2. 对象复用
var t = {} // 每次循环都会创建一个新对象。
for (var i = 0; i < 10; i++) {
// var t = {};// 每次循环都会创建一个新对象。
t.age = 19
t.name = '123'
t.index = i
console.log(t)
}
t = null //对象如果已经不用了,那就立即设置为null;等待垃圾回收。