关于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中get,post和ajax方法的使用小结
Feb 04 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
vue小白入门教程
Apr 02 Javascript
js+css实现红包雨效果
Jul 12 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
JavaScript中的几种继承方法示例
Dec 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php中二维数组排序问题方法详解
2015/08/28 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
工业设计专业推荐信
2013/10/29 职场文书
应届生程序员求职信
2013/11/05 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
拾金不昧表扬信
2015/01/16 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android