二.内存管理
2.1 循环引用
说明:如果循环引用中包含 DOM 对象或者 ActiveX 对象,那么就会发生
内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分
内存不会被浏览器释放。
简单的循环引用:
var el = document.getElementById(‘MyElement‘);
var func = function () {…}
el.func = func;
func.element = el;
但是通常不会出现这种情况。通常循环引用发生在为 dom 元素添加闭包
作为 expendo 的时候。
如:
function init() {
var el = document.getElementById(‘MyElement‘);
el.onclick = function () {……}
}
init();
init 在执行的时候,当前上下文我们叫做 context。这个时候, context
引用了 el, el 引用了 function, function 引用了 context。这时候形成
了一个循环引用。
下面 2 种方法可以解决循环引用:
1) 置空 dom 对象
服用前:
function init() {
var el = document.getElementById(‘MyElement‘);
el.onclick = function () {……}
}
init();
服用后:
function init() {
var el = document.getElementById(‘MyElement‘);
el.onclick = function () {……}
el = null;
}
init();
将 el 置空, context 中不包含对 dom 对象的引用,从而打断循环应用。
如果我们需要将 dom 对象返回,可以用如下方法:
服用前:
function init() {
var el = document.getElementById(‘MyElement‘);
el.onclick = function () {……}
return el;
}
init();
服用后:
function init() {
var el = document.getElementById(‘MyElement‘);
el.onclick = function () {……}
try{
return el;
} finally {
el = null;
} }
init();
2) 构造新的 context
服用前:
function init() {
var el = document.getElementById(‘MyElement‘);
el.onclick = function () {……}
}
init();
服用后:
function elClickHandler() {……}
function init() {
var el = document.getElementById(‘MyElement‘);
el.onclick = elClickHandler;
}
init();
把 function 抽到新的 context 中,这样, function 的 context 就不包含
对 el 的引用,从而打断循环引用。
function create () {
var gc = document.getElementById(‘clicme‘);
for (var i = 0; i < 5000 ; i++) {
var el = document.createElement(‘div‘);
el.innerHTML = "test";
//下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮 然后刷新后的内存变化
// gc.appendChild(el);
}
}
create();