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内存泄露问题的解析 JavaScript内存泄露问题是一种常见的bug，它会导致系统崩溃和性能下降。内存泄露是指系统不能正确地管理内存分配的情况，这可能会导致程序调用失败、执行减慢等问题。 在JavaScript...
### JavaScript内存泄露详解 #### 一、什么是JavaScript内存泄露？ 在JavaScript编程中，内存泄露指的是在浏览器中不再使用的变量或对象占用的内存没有被及时回收，导致可用内存逐渐减少的现象。这种现象通常发生...
在探讨JavaScript内存泄漏的处理方式前，有必要了解内存泄漏的含义。内存泄漏通常指的是程序不再使用的内存未能被释放，导致内存消耗不断上升。即使在高级语言如JavaScript中，这一问题亦可能出现，尽管它拥有垃圾...
Iframe 内存泄露分析是指在使用 Iframe 时，由于互相引用、闭包、跨页面泄漏、伪泄漏等原因，导致浏览器内存泄漏的问题。这种问题在 Ajax 盛行以前并不是什么大问题，因为都是通过页面跳转和刷新来进行与服务端的...
JavaScript内存泄漏是一个重要的编程问题，尤其对于Web应用来说，它可能导致性能下降，用户界面响应变慢，甚至在极端情况下导致应用程序崩溃。理解内存泄漏的原因、如何检测和解决它们是每个JavaScript开发者必备的...
sIEve是一款专门针对JavaScript内存泄漏检测的工具，版本为0.0.8。这款工具的主要目标是帮助开发者识别和定位JavaScript应用中的内存泄漏问题，以优化性能并提高用户体验。sIEve通过深入分析JavaScript运行时的内存...
JavaScript内存泄漏是一个重要的主题，尤其是在开发复杂且性能敏感的Web应用程序时。JavaScript是一种动态类型语言，它在浏览器环境中运行，并依赖于垃圾收集机制来管理内存。然而，由于一些特性及浏览器实现的差异...
本文将详细探讨JavaScript内存泄漏的原因，并展示一些常见的内存泄漏模式，以及如何解决这些问题。 首先，JavaScript 是一种垃圾收集语言，意味着对象创建时会分配内存，在没有更多引用时由浏览器回收这些内存。...
在使用Electron结合Vue进行桌面应用开发时，内存泄漏是一个常见且需要重点关注的问题。内存泄漏问题的出现会逐渐消耗系统资源，最终可能导致应用崩溃或运行缓慢。在Electron中，内存泄漏主要跟主进程和渲染进程的...
总之，JavaScript内存泄漏是复杂但可管理的问题。理解各种泄漏类型，结合适当的工具进行调试，可以帮助开发者编写出更高效、更稳定的Web应用。在编写JavaScript代码时，应养成良好的编程习惯，如及时解除引用，谨慎...
IE在早期版本中有一个著名的内存泄露问题，当DOM节点和JavaScript对象通过事件监听器或其他方式相互引用时，即使这些元素从DOM树中移除，由于循环引用的存在，它们的内存不会被释放。解决这个问题的方法是手动解除...
在JavaScript开发中，内存泄露是一个常见的问题，它会导致页面崩溃、性能下降和用户体验不良。因此，了解如何避免内存泄露和有效地管理内存是非常重要的。本文将详细讲解JavaScript中的内存泄露问题和解决方案。 一...
内存泄漏是程序运行过程中，不再使用的内存没有被正确释放，导致系统资源持续占用，从而影响程序性能甚至系统...了解并掌握这些知识点，开发者可以更有效地预防和解决JavaScript内存泄漏问题，确保应用的高效稳定运行。
【JavaScript源代码】一篇文章弄懂javascript内存泄漏 在JavaScript中，内存管理对于程序性能至关重要，因为内存泄漏会导致程序效率下降，甚至可能导致应用崩溃。本文旨在深入解析JavaScript中的内存泄漏及其解决...
2. **内存泄漏类型**：常见的JavaScript内存泄露包括全局变量、闭包引用、DOM元素引用、事件监听器等。了解这些类型有助于识别潜在问题。 3. **工具使用**：利用如IE Developer Tools（F12工具）、Chrome DevTools...
常见的JavaScript内存泄露类型有： 1. 意外的全局变量：未声明的变量默认成为全局变量，这可能导致意外的内存占用。例如，忘记在函数内部使用`var`关键字会导致变量被附加到全局对象window上，形成持久化的内存占用...
在 JavaScript 中，内存泄漏是一种常见的问题，它会导致应用程序的性能下降和崩溃。检测内存泄漏是一个复杂的任务，需要对内存泄漏的原因和机理进行深入分析。本文研究了十一种常见的内存泄漏模式，并提出了一种结合...
“JS关于ie的内存泄漏与javascript内存释放资料.doc”和“Js内存泄漏及解决方案.doc”可能详细解释了JavaScript中如何发生内存泄漏，尤其是在IE浏览器中的特殊情况。IE浏览器因为其独特的内存管理机制，如活动对象链...
### 常见的JavaScript内存泄露原因及解决方案 #### 引言 在现代Web开发中，JavaScript已成为构建复杂用户界面的主要编程语言之一。随着应用程序变得越来越庞大与复杂，有效地管理和优化内存成为确保应用性能和用户...