javascript removeChild 导致的内存泄漏

为得求证，自己写了一个页面来验证怎样内存泄漏。代码如下


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试内存泄漏</title>
<script type="text/javascript">
function creatDiv()
{
var divObj = document.createElement("div");
divObj.id="testDiv";
divObj.innerHTML = "用来测试的DIV";
document.getElementById("main").appendChild(divObj);
}
function removeDiv()
{
document.getElementById("main").removeChild(document.getElementById("testDiv"));
}
function checkDiv()
{
alert(document.getElementById("testDiv"));
}
</script>
</head>
<body>
<div id="main">
</div>
<a href='javascript:creatDiv();'>创建元素</a>
[br]
<a href='javascript:removeDiv();'>删除元素</a>
[br]
<a href='javascript:checkDiv();'>测试DIV是否还存在</a>
</body>
</html>

测试内存泄漏

function creatDiv()
{
var divObj = document.createElement("div");
divObj.id="testDiv";
divObj.innerHTML = "用来测试的DIV";
document.getElementById("main").appendChild(divObj);
}
function removeDiv()
{
document.getElementById("main").removeChild(document.getElementById("testDiv"));
}
function checkDiv()
{
alert(document.getElementById("testDiv"));
}

创建元素

删除元素

测试DIV是否还存在

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

点击“创建元素”后再点击“删除元素”将新创建的元素用 removeChild 将其删除，再点击“测试DIV是否还存在”来查看元素是否真的删除了，结果 alert 显示

null 。看来元素结点真的已经被删除了。那司徒正美文中所说到的内存泄露又是怎么一种情况呢？只好上 google 搜索，看是否有人也遇到 removeChild 引起内
存泄漏的问题。终于在一英文版的 msdn 发现有人在问同样的问题（LINK），我将它里面的代码稍微修改一下通过对比的方式来看一下 removeChild 引起内存泄漏的情况。
代码如下：

代码如下:

<html>
<head>
<title>测试 removeChild 导致的内存泄漏</title>
</head>
<body>
<a href="javascript:leak();">产生内存泄漏方式</a>
<br />
<a href="javascript:notLeak();">不产生内存泄漏方式</a>
</body>
</html>
<script>
var dialog;
function add()
{
dialog = document.createElement('div');
var html = '<div><p>Title</p></div>';
dialog.innerHTML = html;
document.body.appendChild(dialog);
dialog.style.marginTop='200px';
dialog.style.marginLeft='200px';
}
function remove()
{
document.body.removeChild(dialog);
dialog=null;
}
function leak()
{
for(var i=0;i<100000;i++){
add();
remove();
}
alert('leak done');
}
function notLeak()
{
for(var i=0;i<100000;i++){
add();
discardElement(dialog);
}
alert('notLeak done');
}
function discardElement(element) {
var garbageBin = document.getElementById('IELeakGarbageBin');
if (!garbageBin) {
garbageBin = document.createElement('DIV');
garbageBin.id = 'IELeakGarbageBin';
garbageBin.style.display = 'none';
document.body.appendChild(garbageBin);
}
// move the element to the garbage bin
garbageBin.appendChild(element);
garbageBin.innerHTML = '';
}
</script>

测试 removeChild 导致的内存泄漏

产生内存泄漏方式

不产生内存泄漏方式

var dialog;
function add()
{
dialog = document.createElement('div');
var html = '

Title

';
dialog.innerHTML = html;
document.body.appendChild(dialog);
dialog.style.marginTop='200px';
dialog.style.marginLeft='200px';
}
function remove()
{
document.body.removeChild(dialog);
dialog=null;
}
function leak()
{
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

首先运行“产生内存泄漏方式”
未运行前打开任务管理器监控内存大小如下：

运行完再查看内存大小，可以看到内存大小已经增加了很多。

接着我再运行“不产生内存泄漏方式”
未运行前打开任务管理器监控内存大小如下：

运行完再查看内存大小，可以看到内存较“产生内存泄漏方式”小了很多。

PS: 为了检验 removeChild 导致的内存泄漏 ，我 google 了很多 IE 内存泄漏的相关文章。
相关文章如下：
http://www.cnblogs.com/dwjaissk/archive/2007/07/20/824884.html
http://bugs.dojotoolkit.org/ticket/1727
http://article.yeeyan.org/view/3407/10103

赞 (0)

相关推荐

  • 深入理解JavaScript程序中内存泄漏

    深入理解JavaScript程序中内存泄漏

    垃圾回收解放了我们,它让我们可将精力集中在应用程序逻辑(而不是内存管理)上.但是,垃圾收集并不神奇.了解它的工作原理,以及如何使它保留本应在很久以前释放的内存,就可以实现更快更可靠的应用程序.在本文中,学习一种定位 JavaScript 应用程序中内存泄漏的系统方法.几种常见的泄漏模式,以及解决这些泄漏的适当方法. 一.简介 当处理 JavaScript 这样的脚本语言时,很容易忘记每个对象.类.字符串.数字和方法都需要分配和保留内存.语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节. 许

  • 插件：检测javascript的内存泄漏

    插件：检测javascript的内存泄漏

    转自:http://www.ajaxjs.com/yuicn/bbs/ShowPost.asp?ThreadID=6 2006-10-18 @ 07:59:29 · 作者 volcano Javascript的内存泄漏,不是太可怕.它只会悄悄的,慢慢的把你的浏览器拖的巨慢无比,让你愤怒的拍案而起,大骂微软出品的破烂浏览器危害社会.这一切有可能并不是浏览器的错,可能只是因为网页上有些javascript的内存泄漏罢了. 在科技日益发达今天,我们有必要武装自己,以及自己的浏览器,这样万一浏览器倒下了

  • 浅析Node.js中的内存泄漏问题

    浅析Node.js中的内存泄漏问题

    这篇文章是由Mozilla的Identity团队带来的 A Node.JS Holiday Season系列文章的首篇,该团队上个月发布了 Persona的第一个测试版本.在开发Persona时我们构建了一系列的工具,包括了从调试,到本地化,到依赖管理以及更多的方面.在这一系列的文章中我们将与社区分享我们的经验和这些工具,这对任何想用node.js建立一个高可用性服务的人都很有用.我们希望您能喜欢这些文章,并期待看到您的想法和贡献. 我们将从一篇关于Node.js的实质性问题:内存泄漏的主题文章

  • 防止动态加载JavaScript引起的内存泄漏问题

    为了释放脚本资源,通常在返回后还要一些进行额外的处理. 复制代码 代码如下: script = document.createElement('script'); script.src = 'http://example.com/cgi-bin/jsonp?q=What+is+the+meaning+of+life%3F'; script.id = 'JSONP'; script.type = 'text/javascript'; script.charset = 'utf-8'; // 标签加

  • 详谈JavaScript内存泄漏

    1.什么是闭包.以及闭包所涉及的作用域链这里就不说了. 2.JavaScript垃圾回收机制 JavaScript不需要手动地释放内存,它使用一种自动垃圾回收机制(garbage collection).当一个对象无用的时候,即程序中无变量引用这个对象时,就会从内存中释放掉这个变量. 复制代码 代码如下: var s = [ 1, 2 ,3];     var s = null;     //这样原始的数组[1 ,2 ,3]就会被释放掉了. 3.循环引用 三个对象 A .B .C AàBàC :

  • javascript垃圾收集机制与内存泄漏详细解析

    javascript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中的使用的内存.而在C和C++之类的语言中,开发人员的一项基本任务就是手动跟踪内存的使用情况,这是造成许多问题的一个根源.在编写javascript程序时候,开发人员不用再关心内存使用的问题,所需内存的分配 以及无用的回收完全实现了自动管理.这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其中占用的内存.为此,垃圾收集器会按照固定的时间间隔(或代码执行中预设的收集时间),周期性的执行这一操作.

  • JavaScript中内存泄漏的介绍与教程（推荐）

    JavaScript中内存泄漏的介绍与教程（推荐）

    本文主要给大家详细介绍了关于JavaScript中内存泄漏的相关内容,文中介绍的非常详细,对大家具有一定的参考学习价值,下面来一起看看详细的介绍: 一.什么是内存泄漏? 程序的运行需要内存.只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存. 对于持续运行的服务进程(daemon),必须及时释放不再用到的内存.否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃. 不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak). 有些语言(比如 C 语言)必须手动

  • javascript removeChild 导致的内存泄漏

    为得求证,自己写了一个页面来验证怎样内存泄漏.代码如下 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • 解决vue自定义指令导致的内存泄漏问题

    vue的自定义指令是一个比较容易引起内存泄漏的地方,原因就在于指令通常给元素绑定了事件,但是如果忘记了解绑,就会产生内存泄漏的问题. 看下面代码: directives: { scroll: { inserted (el, cb) { // 不是元素节点 || 未设置回调函数 if (el.nodeType !== 1 || !cb) return let direct = 'down' let rollHeight = 0 let getScrollEventTarget = (target)

  • ThreadLocal导致JVM内存泄漏原因探究

    目录 为什么要使用ThreadLocal 使用ThreadLocal 具体实现 引发内存泄漏的原因 为什么要使用ThreadLocal 在一整个业务逻辑流程中,为了在不同的地方或者不同的方法中使用同一个对象,但是又不想在方法形参中加这个对象,那么就可以使用ThreadLocal来保存 ThreadLocal最大的应用场景就是跨方法进行参数传递 ThreadLocal可以给每一个线程绑定一个变量的副本 使用ThreadLocal ThreadLocal常用的方法其实也就下面几个 // 返回当前线程

  • 一文搞懂如何避免JavaScript内存泄漏

    一文搞懂如何避免JavaScript内存泄漏

    目录 一.什么是内存泄漏 二.常见的内存泄漏 1.意外的全局变量 2. 计时器 3. 闭包 4. 事件监听器 5.缓存 6.分离的DOM元素 三.识别内存泄漏 1.使用性能分析器可视化内存消耗 2. 识别分离的 DOM 节点 大家好,我是CUGGZ.SPA(单页应用程序)的兴起,促使我们更加关注与内存相关的 JavaScript 编码实践.如果应用使用的内存越来越多,就会严重影响性能,甚至导致浏览器的崩溃.下面就来看看JavaScript中常见的内存泄漏以及如何避免内存泄漏. 一.什么是内存泄漏

  • Vue优化:常见会导致内存泄漏问题及优化详解

    如果你在用 Vue 开发应用,那么就要当心内存泄漏的问题.这个问题在单页应用 (SPA) 中尤为重要,因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效.因此在vue开发过程中,你需要时刻警惕内存泄漏的问题,这些内存泄漏往往会发生在使用 Vue 之外的其它进行 DOM 操作的三方库时,请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理. 下面是我开发过程中遇到,并查资料总结的内存泄漏问题,会持续更新中

  • 手把手教你如何排查Javascript内存泄漏

    手把手教你如何排查Javascript内存泄漏

    目录 引言 如何判断我的应用发生了内存泄漏 Performance和Memory都可以用来定位内存问题,先用谁呢 通过Memory面板定位内存泄漏的流程通常是怎么样的呢 为什么我的内存快照记录下来之后看不懂,还出现了很多奇怪的变量 快照里有一些“Detached DOM tree”,是什么意思 Shallow size 和 Retained size,它们有什么不同 Memory里的Summary视图, Comparison视图, Dominators视图和Containment视图分别有什么不

  • golang容易导致内存泄漏的6种情况汇总

    目录 1. 定时器使用不当 1.1 time.After()的使用 1.2 time.NewTicker资源未及时释放 2. select阻塞 2.1 导致goroutine阻塞的情况 2.2 循环空转导致CPU暴涨 3. channel阻塞 4. goroutine导致的内存泄漏 4.1 申请过多的goroutine 4.2 goroutine阻塞 4.2.1 I/O问题 4.2.2 互斥锁未释放 4.2.3 死锁 4.2.4 waitgroup使用不当 5. slice 引起的内存泄漏 6.

  • 内存溢出和内存泄漏的详解及区别

    内存溢出和内存泄漏的详解及区别 内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就是内存溢出. 内存泄露 memory leak,是指程序在申请内存后,无法释放已申请的内存空间,一次内存泄露危害可以忽略,但内存泄露堆积后果很严重,无论多少内存,迟早会被占光. memory leak会最终会导致out of memory! 内存溢出就是你要求分配的内存超出了系统能

随机推荐