关于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 StringBuilder类实现
Dec 22 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
js 解析 JSON 数据简单示例
Apr 21 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP+DBM的同学录程序(5)
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
javascript 常用功能总结
2012/03/18 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
荷叶圆圆教学反思
2014/02/01 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
2015入党自传书范文
2015/06/26 职场文书
银行培训心得体会范文
2016/01/09 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫