关于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的with 语句的使用方法
May 09 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
vue router使用query和params传参的使用和区别
Nov 13 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php项目打包方法
2008/02/18 PHP
php 分页类 扩展代码
2009/06/11 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
Vue中props的详解
2019/05/16 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python中循环引用(import)失败的解决方法
2018/04/22 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python实现扫描ip地址的小程序
2019/04/16 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
python 实现有道翻译功能
2021/02/26 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
人力管理专业毕业生求职信
2014/02/27 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
2014年维修工作总结
2014/11/22 职场文书
明确岗位职责
2015/02/14 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书