关于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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
react-router实现按需加载
May 09 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
vue数据响应式原理知识点总结
Feb 16 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列出一个目录下的所有文件的代码
2012/10/09 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
8个PHP数组面试题
2015/06/23 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python变量赋值的秘密分享
2018/04/03 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
医疗纠纷协议书
2014/04/16 职场文书
债务授权委托书范本
2014/10/17 职场文书
请客吃饭开场白
2015/06/01 职场文书