关于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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
基于javascript的无缝滚动动画1
Aug 07 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
B2K与车机的中波PK
2021/03/02 无线电
php 过滤器实现代码
2010/08/09 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
Python with的用法
2014/08/22 Python
Python缩进和冒号详解
2016/06/01 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
运动会入场口号
2014/06/07 职场文书
法人授权委托书
2014/09/16 职场文书
个人工作能力自我评价
2015/03/05 职场文书
检讨书范文大全
2015/05/07 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js