关于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 函数使用说明
Apr 07 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
JS highcharts动态柱状图原理及实现
Oct 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
世界上第一台立体声收音机
2021/03/01 无线电
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
详解vue v-model
2020/08/31 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
详解django中使用定时任务的方法
2018/09/27 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
python实现三壶谜题的示例详解
2020/11/02 Python
《中彩那天》教学反思
2014/02/22 职场文书
小学二年级评语
2014/04/21 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python