关于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 call方法使用说明
Jan 11 Javascript
javascript动态加载二
Aug 22 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
javascript事件模型实例分析
Jan 30 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 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中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python批量发送post请求的实现代码
2018/05/05 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
简单了解Python3里的一些新特性
2019/07/13 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
六道php面试题附答案
2014/06/05 面试题
数据库方面面试题
2012/04/22 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
2014国庆节标语口号
2014/09/19 职场文书
北京英文导游词
2015/02/12 职场文书
初中信息技术教学反思
2016/02/16 职场文书