关于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实现 在光标处插入指定内容
May 25 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
jQuery插件之validation插件
Mar 29 jQuery
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
小程序如何获取多个formId实现详解
Sep 20 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
再说下636单管机
2021/03/02 无线电
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python正则表达式经典入门教程
2017/05/22 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python实现名片管理系统项目
2019/04/26 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
情人节活动策划方案
2014/02/27 职场文书
公司保密承诺书
2014/03/27 职场文书
装修施工安全责任书
2014/07/24 职场文书
宇宙与人观后感
2015/06/05 职场文书
吴仁宝观后感
2015/06/09 职场文书
开学第一周值周总结
2015/07/16 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书