关于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 相关文章推荐
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
layui监听单元格编辑前后交互的例子
Sep 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php minixml详解
2008/07/19 PHP
php 远程关机操作的代码
2008/12/05 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
python实现识别相似图片小结
2016/02/22 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python 一维二维插值实例
2020/04/22 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
个人职业生涯规划书1500字
2013/12/31 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
部队2014年终工作总结
2014/11/27 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
Java获取字符串编码格式实现思路
2022/09/23 Java/Android
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript