JavaScript在IE中的一个内存泄漏的例子

本文通过四个具体的案例对比分析了IE浏览器中不同DOM操作及事件绑定方式对内存使用的影响,揭示了循环引用导致的内存泄漏问题,并给出了相应的解决建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

在运行例子时请看着你任务管理器中进程IE(我用的是IE8)的内存变化,(注:请注意例子中标黑部分

例1:结论:IE内存基本不变

//---------------正常-----------------------

var a = new Array(1),i = 10000;

function loop(){

if(i--){

var el = document.createElement('div');

var nd = document.createTextNode(i);

el.appendChild(nd);

a.push(el);

document.body.appendChild(el);

var de = a.shift();

if(de){

de.parentNode.removeChild(de);

}

setTimeout(loop, 100);

}

};

loop();

 

例2:结论:IE内存基本不变

//---------------正常-----------------------

var a = new Array(1),i = 10000;

function clickFn(){

}

function loop(){

if(i--){

var el = document.createElement('div');

var nd = document.createTextNode(i);

el.appendChild(nd);

el.attachEvent('onclick', clickFn);

a.push(el);

document.body.appendChild(el);

var de = a.shift();

if(de){

de.parentNode.removeChild(de);

}

setTimeout(loop, 100);

}

};

loop();

例3:结论:IE内存平稳增加,速度大概1M/s

//---------------内存泄漏-----------------------

var a = new Array(1),i = 10000;

function loop(){

if(i--){

var el = document.createElement('div');

var nd = document.createTextNode(i);

el.appendChild(nd);

el.onclick = function(){}

a.push(el);

document.body.appendChild(el);

var de = a.shift();

if(de){

de.parentNode.removeChild(de);

}

setTimeout(loop, 100);

}

};

loop();

例4:结论:IE内存平稳增加,速度大概1M/s

//---------------内存泄漏-----------------------

var a = new Array(1),i = 10000;

function loop(){

if(i--){

var el = document.createElement('div');

var nd = document.createTextNode(i);

el.appendChild(nd);

el.attachEvent('onclick', function(){});

a.push(el);

document.body.appendChild(el);

var de = a.shift();

if(de){

de.parentNode.removeChild(de);

}

setTimeout(loop, 100);

}

};

loop();

 

总结:循环引用会产生内存泄漏问题,

例如:var el = document.createElement('div');// javascript对象引用DOM对象

el.refjsobj = el; //DOM对象又引用javascript对象

由以上例子可知,当el.refjsobj引用匿名函数时,也会造成内存泄漏。解决方法:就是在删除节点前,把元素引用javascript对象属性(如:refjsobj)设置为null.

以上总结如有不对之处,还快快指出,不要让兄弟误入歧途。3Q。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值