内存管理的优化

Posted 2020-08-21 zhaojunyang

二．内存管理
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();