关于js内存泄露的一个好例子


Posted in Javascript onDecember 09, 2013

我把别人的例子改了一下,觉得这样写更紧凑!套用别人的原话,当一个DOM对象包含一个Js对象的引用(例如一个Event Handler), 而这个Js对象又持有对这个DOM对象的引用时,一个环状引用就行成了,于是在ie下就出现了内存泄露。点击“运行代码”并打开任务管理器看内存变化。分别在ie8和ff下测试,差距不用多说。

运行代码

<html>
  <head>
    <title>Memory leak</title>
    <style>
     body{
       padding: 10px;
     }
    </style>
  </head>
  <body>
  </body>
  <script>
    var q = [];
    var n = 0;
    setInterval(function(){
      q.push(makeSpan());
      if(q.length>=10){
        var s = q.shift();
        if(s){
          s.parentNode.removeChild(s);
        }
      }
      n++;
    },10);    function makeSpan(){
      var s = document.createElement("span");
      document.body.appendChild(s);
      var t=document.createTextNode("*** " + n + " ***");
      s.appendChild(t);
      s.onclick=function(e){
                s.style.backgroundColor="red";
                alert(n);
            };
            return s;
    };
  </script>
</html>

那么在ie下该怎么解决呢?

在删除节点的时候,手动破除环状引用,把里面setInterval那段代码稍微改动以下:

setInterval(function(){
  q.push(makeSpan());
  if(q.length>=10){
    var s = q.shift();
    if(s){
     s.onclick = null;//关键在这里
      s.parentNode.removeChild(s);
    }
  }
  n++;
},10);
Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
node.js 如何监视文件变化
Sep 01 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 #Javascript
解析Javascript中难以理解的11个问题
Dec 09 #Javascript
深入理解Javascript作用域与变量提升
Dec 09 #Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 #Javascript
jquery div拖动效果示例代码
Dec 08 #Javascript
jquery垂直公告滚动实现代码
Dec 08 #Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 #Javascript
You might like
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
jQuery动态添加
2016/04/07 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
使用Python求解最大公约数的实现方法
2015/08/20 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
django query模块
2019/04/20 Python
Python使用python-docx读写word文档
2019/08/26 Python
浅析Python 多行匹配模式
2020/07/24 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
思想作风纪律整顿心得体会
2014/09/04 职场文书
党章培训心得体会
2014/09/04 职场文书
爱心助学感谢信
2015/01/21 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
雾霾停课通知
2015/04/24 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
mysql如何查询连续记录
2022/05/11 MySQL