JavaScript 中的内存泄漏 _hls.js 内存泄漏-优快云博客

本文探讨了JavaScript中的内存泄漏问题，特别是在Internet Explorer和Mozilla Firefox中。文章详细介绍了内存泄漏产生的原因，特别是循环引用的问题，并提供了避免内存泄漏的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nternet Explorer 和 Mozilla Firefox 是两个与 JavaScript 中的内存泄漏联系最为紧密的浏览器。两个浏览器中造成这种问题的“罪魁祸首”是用来管理 DOM 对象的组件对象模型。本机 Windows COM 和 Mozilla's XPCOM 都使用引用计数的垃圾收集来进行内存分配和检索。引用计数与用于 JavaScript 的标记-清除式的垃圾收集并不总是能相互兼容。本文侧重介绍的是如何应对 JavaScript 代码中的内存泄漏。有关如何处理 Firefox 和 IE 中 COM 层内存泄漏的更多信息，请参看http://www.ibm.com/developerworks/cn/web/wa-memleak/index.html#resources
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>
//----------------------------------------------------------------------------------------------------------------------------------------

首先我们知道数据传递有两种by value & by reference
javascript中对象的传递传得是reference .
那下面例子说明
<html>
<body>
<script type="text/javascript">
//这句不用看了
document.write("circular references between JavaScript and DOM!");
//创建一个指针放在栈内存中；
var obj;
//这个也忽略
window.onload = function(){
// ---------------------------------------
// 1.创建一个dom对象document.getElementById("DivElement")
// 2.将内存中的obj空指针指向 dom对象地址（reference 引用）
// 3.dom对象重新指向本身（reference）
// 4. if obj = null then dom !=null endif dom 被复制了一份而且永远存在
obj=document.getElementById("DivElement");
document.getElementById("DivElement").expandoProperty=obj;
// -------------------------------
// obj.aa == (dom).aa
// then obj = null; 这里的obj = null 只是重新将obj指向用JS对象说明好比这样
// var a = new String(1);
// var b = a;
// alert(b);
// b = null;
// alert(a);
// 我们会发现a 还是存在的
// 因此 obj = null 只是重新将obj重新指向新的reference ;
// 同时内存中dom 对象的property并未消除导致上面说的内存泄露。
// 因此在编程中的指针控制的重要性就体现出来了
// 可参考 Prentice Hall PTR 出版的《C程序设计语言》（美）Brian W.Kernighan,Dennis M.Ritchie [作者]
// ( 非大学教材->tan hao qiang 版的 ) 对指针的操作有很好的说明
// 关于javascipt的 by value & by reference 看下一段说明
obj.aa = new Array(100000).join("x");

};

</script>
<div id="DivElement">Div Element</div>
</body>
</html>

1.传值(by value)
变量的值被复制出一份,与原来的值将不相干,也就是说即使新的值被修改,原来的值也不会改变,在JavaScript中基本类型都是传值的.
function testPassValue()
{

var m=1;
var n=2;

//将m,n的值复制一份,传递到passValue
passValue(m,n);
alert(m); //将是原有的值
}

function passValue(a,b)
{
a = a+b; //改变a的值,这里a只是原有值的一份copy
alert(a);
}
输出结果:
3
1
2.传引用(by reference).

引用本身复制一份传给function,引用指向的对象并没有被复制传递(java中也是如此),在function中,如果改变了对象的属性的值,由于和原来的引用指向的是同一个对象,因此在通过原来的引用访问到的将是修改过的值;

但是如果只是在function中将引用指向一个新的对象,将不会改变原对象的值,改变的只是复制的这一份引用.

function testPassValue()
{
var date = new Date(2007,06,22);
alert(date.getDate()); //输出为 22

//将date引用本身复制一份,传递到passReference,注意date所指向的对象并没有被复制
passReference(date);
alert(date.getDate()); //输出为12

//同上
changeReference(date);
alert(date.getDate()); //输出还为12
}

function passReference(da)
{

//由于da和原引用指向的是同一个对象,在function外,通过原有的引用访问到的将是对象的日期属性值,将是修改之后的值.
da.setDate(12);
}

function changeReference(da)
{

//此时da引用实际上是原引用的一份copy,将引用本身重新赋值,将不会影响原引用
da= new Date(2007,06,23);
//将da引用指向一个新的对象,此时原引用指向的还是原来的对象
alert(da.getDate()); // 输出为23

//--------------------------------------------------------------------------------------------------------

原始值（primitive value）是存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
引用值（reference value）是存储在堆中的对象，也就是说，存储在变量处的值是一个指针，指向存储对象的内存处。
为变量赋值时，ECMAScript的解释程序必须判断该值是原始类型的，还是引用类型的。
要实现这一点，解释程序则需尝试判断该值是否为ECMAScript的原始类型之一，即Undefined、Null、Boolean和String型。
由于这些原始类型占据的空间是固定的，所以可将它们存储在较小的内存区域——栈中。这样存储便于迅速查寻变量的值。
在许多语言中，字符串都被看作引用类型，而非原始类型，因为字符串的长度是可变的。ECMAScript打破了这一传统。(http://www.w3c.com)
如果一个值是引用类型的，那么它的存储空间将从堆中分配。由于引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响
ECMAScript有5种原始类型（primitive type），即Undefined、Null、Boolean、Number和String

所以我怎么还认为var obj 是在栈中初始化的......

就是说

栈
数字布尔值 null 地址(reference) undefiend 字符串

堆
对象