JavaScript 中的内存泄漏

JavaScript 是一种垃圾收集式语言，这就是说，内存是根据对象的创建分配给该对象的，并会在没有对该对象的引用时由浏览器收回。JavaScript 的垃圾收集机制本身并没有问题，但浏览器在为 DOM 对象分配和恢复内存的方式上却有些出入。

Internet Explorer 和 Mozilla Firefox 均使用引用计数来为 DOM 对象处理内存。在引用计数系统，每个所引用的对象都会保留一个计数，以获悉有多少对象正在引用它。如果计数为零，该对象就会被销毁，其占用的内存也会返回 给堆。虽然这种解决方案总的来说还算有效，但在循环引用方面却存在一些盲点。

循环引用的问题何在？

当两个对象互相引用时，就构成了循环引用，其中每个对象的引用计数值都被赋 1。在纯垃圾收集系统中，循环引用问题不大：若涉及到的两个对象中的一个对象被任何其他对象引用，那么这两个对象都将被垃圾收集。而在引用计数系统，这两 个对象都不能被销毁，原因是引用计数永远不能为零。在同时使用了垃圾收集和引用计数的混合系统中，将会发生泄漏，因为系统不能正确识别循环引用。在这种情 况下，DOM 对象和 JavaScript 对象均不能被销毁。清单 1 显示了在 JavaScript 对象和 DOM 对象间存在的一个循环引用。

清单 1. 循环引用导致了内存泄漏


	<html>

     	<body>

     	<script type="text/javascript">

     	document.write("circular references between JavaScript and DOM!");

     	var obj;

     	window.onload = function(){

		obj=document.getElementById("DivElement");

            	document.getElementById("DivElement").expandoProperty=obj;

            	obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));

            	};

     	</script>

     	<div id="DivElement">Div Element</div>

     	</body>

     	</html>

如上述清单中所示，JavaScript 对象 obj
拥有到 DOM 对象的引用，表示为 DivElement
。而 DOM 对象则有到此 JavaScript 对象的引用，由 expandoProperty
表示。可见，JavaScript 对象和 DOM 对象间就产生了一个循环引用。由于 DOM 对象是通过引用计数管理的，所以两个对象将都不能销毁。

另一种内存泄漏模式

在清单 2 中，通过调用外部函数 myFunction
创建循环引用。同样，JavaScript 对象和 DOM 对象间的循环引用也会导致内存泄漏。

清单 2. 由外部函数调用引起的内存泄漏


	<html>

	<head>

	<script type="text/javascript">

	document.write(" object s between JavaScript and DOM!");

	function myFunction(element)

	{

		this.elementReference = element;

		// This code forms a circular reference here

		//by DOM-->JS-->DOM

		element.expandoProperty = this;

	}

	function Leak() {

		//This code will leak

		new myFunction(document.getElementById("myDiv"));

	}

	</script>

	</head>

	<body onload="Leak()">

	<div id="myDiv"></div>

	</body>

	</html>

正如这两个代码示例所示，循环引用很容易创建。在 JavaScript 最为方便的编程结构之一：闭包中，循环引用尤其突出。

JavaScript 中的闭包

JavaScript 的过人之处在于它允许函数嵌套。一个嵌套的内部函数可以继承外部函数的参数和变量，并由该外部函数私有。清单 3 显示了内部函数的一个示例。

清单 3. 一个内部函数


	function parentFunction(paramA)

	{

    		var a = paramA;

    		function childFunction()

    		{

			return a + 2;

    		}

    		return childFunction();

	}

JavaScript 开发人员使用内部函数来在其他函数中集成小型的实用函数。如清单 3 所示，此内部函数 childFunction
可以访问外部函数 parentFunction
的变量。当内部函数获得和使用其外部函数的变量时，就称其为一个闭包 。

了解闭包

考虑如清单 4 所示的代码片段。

清单 4. 一个简单的闭包


	<html>

	<body>

	<script type="text/javascript">

	document.write("Closure Demo!!");

	window.onload=

	function  closureDemoParentFunction(paramA)

	{

   		var a = paramA;

   		return function closureDemoInnerFunction (paramB)

   		{

     			alert( a +" "+ paramB);

   		};

	};

	var x = closureDemoParentFunction("outer x");

	x("inner x");

	</script>

	</body>

	</html>

在上述清单中，closureDemoInnerFunction
是在父函数 closureDemoParentFunction
中定义的内部函数。当用外部的 x 对 closureDemoParentFunction
进行调用时，外部函数变量 a 就会被赋值为外部的 x 。函数会返回指向内部函数 closureDemoInnerFunction
的指针，该指针包括在变量 x 内。

外部函数 closureDemoParentFunction
的本地变量 a 即使在外部函数返回时仍会存在。这一点不同于 C/C++ 这样的编程语言，在 C/C++ 中，一旦函数返回，本地变量也将不复存在。在 JavaScript 中，在调用 closureDemoParentFunction
的时候，带有属性 a 的范围对象将会被创建。该属性包括值 paramA ，又称为“外部 x” 。同样地，当 closureDemoParentFunction
返回时，它将会返回内部函数 closureDemoInnerFunction
，该函数包括在变量 x 中。

由于内部函数持有到外部函数的变量的引用，所以这个带属性 a 的范围对象将不会被垃圾收集。当对具有参数值inner x 的 x 进行调用时，即 x("inner x")
，将会弹出警告消息，表明 “outer x innerx ”。

清单 4简要解释了 JavaScript 闭包。闭包功能非常强大，原因是它们使内部函数在外部函数返回时也仍然可以保留对此外部函数的变量的访问。不幸的是，闭包非常易于隐藏 JavaScript 对象 和 DOM 对象间的循环引用。

闭包和循环引用

在清单 5 中，可以看到一个闭包，在此闭包内，JavaScript 对象（obj
）包含到 DOM 对象的引用（通过 id "element"
被引用）。而 DOM 元素则拥有到 JavaScript obj
的引用。这样建立起来的 JavaScript 对象和 DOM 对象间的循环引用将会导致内存泄漏。

清单 5. 由事件处理引起的内存泄漏模式


	<html>

	<body>

	<script type="text/javascript">

	document.write("Program to illustrate memory leak via closure");

	window.onload=function outerFunction(){

		var obj = document.getElementById("element");

		obj.onclick=function innerFunction(){

		alert("Hi! I will leak");

		};

		obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));

		// This is used to make the leak significant

	};

	</script>

	<button id="element">Click Me</button>

	</body>

	</html>

避免内存泄漏

幸好，JavaScript 中的内存泄漏是可以避免的。当确定了可导致循环引用的模式之后，正如我们在上述章节中所做的那样，您就可以开始着手应对这些模式了。这里，我们将以上述的 由事件处理引起的内存泄漏模式为例来展示三种应对已知内存泄漏的方式。

一种应对 清单 5中的内存泄漏的解决方案是让此 JavaScript 对象 obj
为空，这会显式地打破此循环引用，如清单 6 所示。

清单 6. 打破循环引用


	<html>

	<body>

	<script type="text/javascript">

	document.write("Avoiding memory leak via closure by breaking the circular

    reference");

		window.onload=function outerFunction(){

		var obj = document.getElementById("element");

		obj.onclick=function innerFunction()

		{

			alert("Hi! I have avoided the leak");

			// Some logic here

		};

		obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));

		obj = null

; //This breaks the circular reference

		};

	</script>

	<button id="element">"Click Here"</button>

	</body>

	</html>

清单 7 是通过添加另一个闭包来避免 JavaScript 对象和 DOM 对象间的循环引用。

清单 7. 添加另一个闭包


	<html>

	<body>

	<script type="text/javascript">

	document.write("Avoiding a memory leak by adding another closure");

 	window.onload=function outerFunction(){

	var anotherObj = function innerFunction()

			 {

				// Some logic here

				alert("Hi! I have avoided the leak");

		  	 };

		 (function anotherInnerFunction(){

			var obj =  document.getElementById("element");

			obj.onclick=anotherObj })();

		    };

	</script>

	<button id="element">"Click Here"</button>

	</body>

	</html>

清单 8 则通过添加另一个函数来避免闭包本身，进而阻止了泄漏。

清单 8. 避免闭包自身


	<html>

	<head>

	<script type="text/javascript">

	document.write("Avoid leaks by avoiding closures!");

	window.onload=function()

	{

		var obj = document.getElementById("element");

		obj.onclick = doesNotLeak;

	}

	function doesNotLeak()

	{

		//Your Logic here

		alert("Hi! I have avoided the leak");

	}

	</script>

	</head>

	<body>

	<button id="element">"Click Here"</button>

	</body>

	</html>

结束语

本文解释了循环引用是如何导致 JavaScript 中的内存泄漏的 —— 尤其是在结合了闭包的情况下。您还了解了涉及到循环引用的一些常见内存泄漏模式以及应对这些泄漏模式的几种简单方式

原文地址：http://wv1124.iteye.com/blog/524896

JavaScript 中的内存泄漏的更多相关文章

  1. JavaScript中的内存泄漏以及如何处理

    随着现在的编程语言功能越来越成熟.复杂,内存管理也容易被大家忽略.本文将会讨论JavaScript中的内存泄漏以及如何处理,方便大家在使用JavaScript编码时,更好的应对内存泄漏带来的问题. 概 ...

  2. Javascript中的内存泄漏

    最新博客站点:欢迎来访 一.内存泄漏        由于某些原因不再需要的内存没有被操作系统或则空闲内存池回收.编程语言中有多种管理内存的方式.这些方式从不同程度上会减少内存泄漏的几率,高级语言嵌入了 ...

  3. 了解 JavaScript 应用程序中的内存泄漏

    简介 当处理 JavaScript 这样的脚本语言时,很容易忘记每个对象.类.字符串.数字和方法都需要分配和保留内存.语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节. 许多功能无需考虑内存管理 ...

  4. 高效使用 JavaScript 闭包,避免 Node.js 应用程序中的内存泄漏

    在 Node.js 中,广泛采用不同形式的闭包来支持 Node 的异步和事件驱动编程模型.通过很好地理解闭包,您可以确保所开发应用程序的功能正确性.稳定性和可伸缩性. 闭包是一种将数据与处理数据的代码 ...

  5. javascript中的内存管理和垃圾回收

    前面的话 不管什么程序语言,内存生命周期基本是一致的:首先,分配需要的内存:然后,使用分配到的内存:最后,释放其内存.而对于第三个步骤,何时释放内存及释放哪些变量的内存,则需要使用垃圾回收机制.本文将 ...

  6. JavaScript 中对内存的一些了解

    在使用JavaScript进行开发的过程中,了解JavaScript内存机制有助于开发人员能够清晰的认识到自己写的代码在执行的过程中发生过什么,也能够提高项目的代码质量.其实关于内存的文章也有很多,写 ...

  7. 关于Hash集合以及Java中的内存泄漏

    <学习笔记>关于Hash集合以及Java中的内存泄漏 标签: 学习笔记内存泄露hash 2015-10-11 21:26 58人阅读 评论(0) 收藏 举报  分类: 学习笔记(5)  版 ...

  8. 系统剖析Android中的内存泄漏

    [转发]作为Android开发人员,我们或多或少都听说过内存泄漏.那么何为内存泄漏,Android中的内存泄漏又是什么样子的呢,本文将简单概括的进行一些总结. 关于内存泄露的定义,我可以理解成这样 没 ...

  9. [转载]Java应用程序中的内存泄漏及内存管理

    近期发现测试的项目中有JAVA内存泄露的现象.虽然JAVA有垃圾回收的机制,但是如果不及时释放引用就会发生内存泄露现象.在实际工作中我们使用Jprofiler调用java自带的 jmap来做检测还是很 ...

随机推荐

  1. hdu 5446 Unknown Treasure lucas和CRT

    Unknown Treasure Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  2. 教你如何选择Android游戏引擎

    我们进行Android游戏开发时选择游戏引擎是必须的,但是该如何选择呢?哪个Android游戏引擎更加适合自己呢?本文就提供了三个游戏引擎的对比说明,阐述了它们各自的特点,为大家选择引擎提供了参照. ...

  3. 在Struts2中使用ValueStack、ActionContext、ServletContext、request、session等 .

    笔者不知道该用哪个词来形容ValueStack.ActionContext等可以在Struts2中用来存放数据的类.这些类使用的范围不同,得到的方法也不同,下面就来一一介绍. 声明:本文参考Strut ...

  4. Java设计模式08：框架基础知识

    1. 框架是什么 ? 框架是能完成一定功能的半成品软件.(不能直接使用,还需要再加工,所以叫半成品.比如:方便面) 2. 框架能干什么 ? (1)能完成一定的功能,加快程序开发进度. (2)给我们一个 ...

  5. C#总结1

    C#摘要 第一章: 数据类型: 在定义变量的时候,记下规则,开头不能是数字,变量名只能包括 字母 “_” 数字 整型类型 名称 CTS类型 说明 范围 sbyte System.SByte 8位有符号 ...

  6. 关于Git里程碑

    里程碑即Tag,是人为对提交进行的命名.这和Git的ID是否太长无关.使用任何数字版本号无论长短, 都没有使用一个直观的表意的字符串来的方便.例如:用里程碑名称"v2.1"对应软件 ...

  7. Oracle报错：ORA-01747: user.table.column, table.column 或列说明无效

    1.检查sql书写正确性 2.如果sql书写正确,则是由于数据库列名起的不好引起的,名字用到了数据库的关键字. 如果列很多,又不好确定是哪个列名使用了关键字,以下建议可供参考: 我用以下方法定位 se ...

  8. LintCode 55 比较字符串

    比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母 注意事项 在 A 中出现的 B 字符串里的字符不需要连续或者有序.   样例 给出 A = "ABC ...

  9. GitHub这么火，程序员你不学学吗？ 超简单入门教程 干货

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...

  10. Jquery 实现Xml文件内容处理

    用JS对XMl文件处理实现和用JS处理一般的Dom元素一样; 加载一个Xml内容与新建一个Dom元素基本相同 如: 1.新建一个Dom元素的Jquey语法为:$("<p>hell ...