关于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 相关文章推荐
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Vue监听页面刷新和关闭功能
Jun 20 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 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使用curl下载指定大小的文件实例代码
2017/09/30 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
小程序自定义日历效果
2018/12/29 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python深入学习之装饰器
2014/08/31 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python实现彩票系统
2020/06/28 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Django REST framework视图的用法
2019/01/16 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
毕业生简历自我评价范文
2014/04/09 职场文书
团日活动总结书
2014/05/08 职场文书
2014年教研组工作总结
2014/11/26 职场文书
中学教师读书笔记
2015/07/01 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL