关于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 相关文章推荐
巧用replace将文字表情替换为图片
Apr 17 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 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应用程序的七个习惯深入分析
2013/06/08 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
Python splitlines使用技巧
2008/09/06 Python
八大排序算法的Python实现
2021/01/28 Python
django框架自定义用户表操作示例
2018/08/07 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
XML文档面试题
2015/08/05 面试题
2015年上半年物业工作总结
2015/03/30 职场文书
个人工作决心书
2015/09/22 职场文书
预备党员表决心的话
2015/09/22 职场文书
八年级作文之友情
2019/11/25 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Redis实现一个账号只能登录一个设备
2022/04/19 Redis