关于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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
javascript中indexOf技术详解
May 07 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
javascript变量提升和闭包理解
Mar 12 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
原生JS实现烟花效果
Mar 10 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 过滤危险html代码
2009/06/29 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
如何将json数据转换为python数据
2020/09/04 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
农村婚礼证婚词
2014/01/10 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
通报表扬范文
2015/01/17 职场文书
催款函范文
2015/06/24 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python