《Js内存泄漏及解决方案》由会员分享，可在线阅读，更多相关《Js内存泄漏及解决方案（12页珍藏版）》请在金锄头文库上搜索。
1、Js内存泄漏及解决方案在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面分类给出： 1、给DOM对象添加的属性是一个对象的引用。范例： var MyObject = ; document.getElementById(myDiv).myProp = MyObject; 解决方法：在window.onunload事件中写上: document.getElementById(myDiv).myProp = null; 2、DOM对象与JS对象相互引用。范例： function Encapsulator(element) this.elementReference =
2、 element; element.myProp = this; new Encapsulator(document.getElementById(myDiv); 解决方法：在onunload事件中写上: document.getElementById(myDiv).myProp = null; 3、给DOM对象用attachEvent绑定事件。范例： function doClick() element.attachEvent(onclick, doClick); 解决方法：在onunload事件中写上: element.detachEvent(onclick, doClick); 4、从外
3、到内执行appendChild。这时即使调用removeChild也无法释放。范例： var parentDiv = document.createElement(div); var childDiv = document.createElement(div); document.body.appendChild(parentDiv); parentDiv.appendChild(childDiv); 解决方法：从内到外执行appendChild: var parentDiv = document.createElement(div); var childDiv = document.crea
4、teElement(div); parentDiv.appendChild(childDiv); document.body.appendChild(parentDiv); 5、反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)。范例： for(i = 0; i 5000; i+) hostElement.text = asdfasdfasdf; 这种方式相当于定义了5000个属性！解决方法：其实没什么解决方法就是编程的时候尽量避免出现这种情况咯 说明： 1、以上资料均来源于微软官方的MSDN站点，链接地址： http:/ . e_leak_patterns.asp 大家可以到上
5、面这个地址中看到详细的说明，包括范例和图例都有。只是我英文不太好，看不太懂，如果我上述有失误或有需要补充的地方请大家指出。 2、对于第一条，事实上包括 element.onclick = funcRef 这种写法也算在其中，因为这也是一个对对象的引用。在页面onunload时应该释放掉。 3、对于第三条，在MSDN的英文说明中好像是说即使调用detachEvent也无法释放内存，因为在attachEvent的时候就已经造成内存“LEAK”了，不过detachEvent后情况还是会好一点。不知道是不是这样，请英文好的亲能够指出。 4、在实际编程中，这些内存问题的实际影响并不大，尤其是给客户使用时
6、，客户对此绝不会有察觉，然而这些问题对于程序员来说却始终是个心病 - 有这样的BUG心里总会觉得不舒服吧？能解决则给与解决，这样是最好的。事实上我在这样顶级的JS源码站点中，在它们的源码里都会看到采用上述解决方式进行内存的释放管理。 理解并解决IE的内存泄漏方式 Web开发的发展在过去一些的时候，Web开发人员并没有太多的去关注内存泄露问题。那时的页面间联系大都比较简单，并主要使用不同的连接地址在同一个站点中导航，这样的设计方式是非常有利于浏览器释放资源的。即使Web页面运行中真的出现了资源泄漏，那它的影响也是非常有限而且常常是不会被人在意的。今天人们对Web应用有了高更的要求。一个页面很可能
7、数小时不会发生URL跳转，并同时通过Web服务动态的更新页面内容。复杂的事件关联设计、基于对象的JScript和DHTML技术的广泛采用，使得代码的能力达到了其承受的极限。在这样的情况和改变下，弄清楚内存泄露方式变得非常的急迫，特别是过去这些问题都被传统的页面导航方法给屏蔽了。还算好的事情是，当你明确了希望寻找什么时，内存泄露方式是比较容易被确定的。大多数你能遇到的泄露问题我们都已经知道，你只需要少量额外的工作就会给你带来好处。虽然在一些页面中少量的小泄漏问题仍会发生，但是主要的问题还是很容易解决的。泄露方式在接下来的内容中，我们会讨论内存泄露方式，并为每种方式给出示例。其中一个重要的示例是J
8、Script中的Closure技术，另一个示例是在事件执行中使用Closures。当你熟悉本示例后，你就能找出并修改你已有的大多数内存泄漏问题，但是其它Closure相关的问题可能又会被忽视。现在让我们来看看这些个方式都有什么： 1、循环引用(Circular References) IE浏览器的COM组件产生的对象实例和网页脚本引擎产生的对象实例相互引用，就会造成内存泄漏。这也是Web页面中我们遇到的最常见和主要的泄漏方式； 2、内部函数引用(Closures) Closures可以看成是目前引起大量问题的循环应用的一种特殊形式。由于依赖指定的关键字和语法结构， Closures调用是比较容
9、易被我们发现的； 3、页面交叉泄漏(Cross-Page Leaks) 页面交叉泄漏其实是一种较小的泄漏，它通常在你浏览过程中，由于内部对象薄计引起。下面我们会讨论DOM插入顺序的问题，在那个示例中你会发现只需要改动少量的代码，我们就可以避免对象薄计对对象构建带来的影响； 4、貌似泄漏(Pseudo-Leaks) 这个不是真正的意义上的泄漏，不过如果你不了解它，你可能会在你的可用内存资源变得越来越少的时候极度郁闷。为了演示这个问题，我们将通过重写Script元素中的内容来引发大量内存的泄漏。循环引用循环引用基本上是所有泄漏的始作俑者。通常情况下，脚本引擎通过垃圾收集器(GC)来处理循环引用，但
10、是某些未知因数可能会妨碍从其环境中释放资源。对于IE来说，某些DOM对象实例的状态是脚本无法得知的。下面是它们的基本原则： Figure 1: 基本的循环引用模型本模型中引起的泄漏问题基于COM的引用计数。脚本引擎对象会维持对DOM对象的引用，并在清理和释放DOM对象指针前等待所有引用的移除。在我们的示例中，我们的脚本引擎对象上有两个引用：脚本引擎作用域和DOM对象的expando属性。当终止脚本引擎时第一个引用会释放，DOM 对象引用由于在等待脚本擎的释放而并不会被释放。你可能会认为检测并修复假设的这类问题会非常的容易，但事实上这样基本的的示例只是冰山一角。你可能会在30个对象链的末尾发生循
11、环引用，这样的问题排查起来将会是一场噩梦。如果你仍不清楚这种泄漏方式在HTML代码里到底怎样，你可以通过一个全局脚本变量和一个DOM对象来引发并展现它。 - var myGlobalObject; function SetupLeak() / First set up the script scope to element reference myGlobalObject = document.getElementById(LeakedDiv); / Next set up the element to script scope reference document.getElementByI
12、d(LeakedDiv).expandoProperty = myGlobalObject; function BreakLeak() document.getElementById(LeakedDiv).expandoProperty = null; 你可以使用直接赋null值得方式来破坏该泄漏情形。在页面文档卸载前赋null值，将会让脚本引擎知道对象间的引用链没 有了。现在它将能正常的清理引用并释放DOM对象。在这个示例中，作为Web开发员的你因该更多的了解了对象间的关系。 作为一个基本的情形，循环引用可能还有更多不同的复杂表现。对基于对象的JScript，一个通常用法是通过封装JScri
13、pt对象来扩充DOM对 象。在构建过程中，你常常会把DOM对象的引用放入JScript对象中，同时在DOM对象中也存放上对新近创建的JScript对象的引用。你的这种应 用模式将非常便于两个对象之间的相互访问。这是一个非常直接的循环引用问题，但是由于使用不用的语法形式可能并不会让你在意。要破环 这种使用情景可能变得更加复杂，当然你同样可以使用简单的示例以便于清楚的讨论。 function Encapsulator(element) / Set up our element this.elementReference = element; / Make our circular referenc
14、e element.expandoProperty = this; function SetupLeak() / The leak happens all at once new Encapsulator(document.getElementById(LeakedDiv); function BreakLeak() document.getElementById(LeakedDiv).expandoProperty = null; 更复杂的办法还有记录所有需要解除引用的对象和属性，然后在Web文档卸载的时候统一清理，但大多数时候你可能会再造成额外的泄漏情形，而并没有解决你的问题。闭包函数(Closures)由
