关于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中“+=”的应用
Feb 02 Javascript
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 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中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Dom与浏览器兼容性说明
2010/10/25 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
JSON 数据格式详解
2017/09/13 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
为什么称python为胶水语言
2020/06/16 Python
Python如何读写CSV文件
2020/08/13 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
微信营销策划方案
2014/02/24 职场文书
委托书范文
2014/04/02 职场文书
授权委托书范本
2014/04/03 职场文书
课内比教学心得体会
2014/09/09 职场文书
学校端午节活动总结
2015/02/11 职场文书
重阳节主题班会
2015/08/17 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
Java异常处理try catch的基本用法
2021/12/06 Java/Android