关于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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
13个PHP函数超实用
Oct 21 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
JavaScript实现左右滚动电影画布
Feb 06 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
大学旷课检讨书
2014/01/28 职场文书
四年大学自我鉴定
2014/02/17 职场文书
酒店节能降耗方案
2014/05/08 职场文书
个人委托书
2014/07/31 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2015年团支部工作总结
2015/04/03 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
KTV员工管理制度
2015/08/06 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
八年级语文教学反思
2016/03/03 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers