怎么用JS理解IE的内存泄露

这篇文章主要讲解了“怎么用JS理解IE的内存泄露”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用JS理解IE的内存泄露”吧！一、前言IE6~8除了不遵守W3C标准和各种诡异外，我想最让人诟病的应该是内存泄露的问题了。这阵子趁项目技术调研的机会好好的再认识一回，以下内容若有纰漏请大家指正，谢谢！目录一大坨！二、内存泄漏到底是哪里漏了？2.1. JS Engine Object、DOM Element 和 BOM Element2.2. JS Engine Object的内存回收机制2.3. DOM Element的内存回收机制2.4. 两种泄漏方式三、4种泄漏模式3.1. Circular References3.2. Closures3.3. Cross-page Leaks3.4. Pseduo-Leaks四、当前页面泄漏的示例4.1. DOM Hyperspace引起的DOM Element引用孤岛　 4.2. 释放Iframe没那么简单五、IE8下连续修改IMG的src居然耗尽内存？六、监控工具七、总结八、参考二、内存泄漏到底是哪里漏了？SPA跑久了页面响应速度剧减又被用户投诉，搪塞说句“IE是比较容易发生内存泄漏，刷刷页面就好”。那真的是刷刷页面就能释放泄漏了的内存吗？下面我们一起来探讨一下！内存泄漏：内存资源得不到释放 && 失去对该内存区的指针 => 无法复用内存资源，最终导致内存溢出2.1. JS Engine Object、DOM Element 和 BOM ElementScript中我们能操作的对象可分为三种：JS Engine Object、DOM Element 和 BOM Element。JS Engine Object： var obj = Object(); var array = [];等等DOM Element： var el = document.createElement(‘div’); var div = document.getElementById(‘name’);等等BOM Element： window; window.location;等等其中只有JS Engine Object和DOM Element是我们可以CRUD的，因此也就有可能发生内存泄漏的问题。2.2. JS Engine Object的内存回收机制　IE的JScript Garbage Collector采用的是Mark-and-Sweep算法，当执行垃圾回收时会先遍历所有JS Engine Object并标记未被引用的对象，然后释放掉被标记的内存空间。由于Mark-and-Sweep算法的缘故，也能很好地释放引用孤岛的内存空间。而IE下独有的CollectGarbage()则用于回收无引用或引用孤岛的JS Engine Object。2.3. DOM Element的内存回收机制当DOM Element不再被引用时会被回收，但具体被谁何时回收则有待研究了。2.4. 两种泄漏方式a. 当前页面泄漏：刷新页面或跳转到其他页面就能释放的内存资源。b. 跨页面泄漏：刷新页面或跳转到其他页面也无法释放的内存资源。当前页面泄漏处理难度相对简单，跨页面泄漏才是处理大头。三、4种泄漏模式下面是Justin Rogers总结出来的4种会引起泄漏的反模式。3.1. Circular References(导致跨页面内存泄漏)循环引用可谓是引起内存泄漏的根本原因，其他的泄漏模式***层还是因为出现的循环引用。Leak MemoryNon-Leak Memory3.2. Closures(导致跨页面内存泄漏)闭包具有Lexical scope特性，延长了方法参数和局部变量的生命周期，但同时又容易在无意当中引入循环引用的问题。Leak MemoryNon-Leak Memory 3.3. Cross-page Leaks（当前页面内存泄漏）由于节点建立联系时会寻找scope，若没有则创建temporary scope，若有则抛弃原有的temporary scope采用已有的scope。Leak Memory当childDiv与parentDiv建立连接时，为让childDiv能获取parentDiv的信息，IE会创建temporary scope。而当将parentDiv添加到DOM tree中时，则childDiv和parentDiv均继承document的scope，而temporary scope却不会被GC释放，而要等待浏览器刷新页面才能清理。Non-Leak Memory一直使用document scope，不会创建temporary scope3.4. Pseduo-Leaks连续创建多个JS Engine Object，而GC未能及时释放内存，其实根本就不是内存泄漏var tmpStr
for(var i = 0; i tmpStr = “test”四、当前页面泄漏的免费云主机、域名示例4.1. DOM Hyperspace引起的DOM Element引用孤岛DOM Hyperspace由PPK发现，在IE下通过removeChild或removeNode从父节点（无论是否已加入DOM Tree）中移除节点后，会创建一个新的#documentFragment，并且被移除的节点的parentNode为 该#documentFragment，而该#documentFragment.firstChild为被移除的节点，因此存在DOM Element间的circular reference导致无法释放，只有刷新页面后才会释放资源。Leak Memoryvar div = document.createElement(‘div’)
document.body.appendChild(div)
div.parentNode.removeChild(div)alert(div.parentNode) // IE8下为[Object object]，Chrome等浏览器为nullNon-Leak Memory4.2. 释放Iframe没那么简单iframe所占的资源有两部分：iframe元素所占的内存空间 和 iframe内页面所占的内存空间。内存空间释放步骤：1. 释放 iframe内页面所占的内存空间通过设置src=”或src=’about:blank’来释放内部页面的资源2. 释放 iframe元素所占的内存空间通过removeChild、removeNode等方法释放iframe元素的内存空间ligerTab1.2.1的清除方式var iframe = …
iframe.src = ‘about:blank’
iframe.contentWindow.document.write(”)
CollectGarbage && CollectGarbage()
iframe.parentNode.removeChild(iframe)五、IE8下连续修改IMG的src居然耗尽内存？由于IE8会对非原始尺寸的图片进行抗锯齿平滑处理，从而消耗更多的CPU和内存资源。当图片大小和尺寸到一定时，则会出现挂死的情况。（IE6、7没有抗锯齿平滑处理，而IE9则移除该功能）而这种情况当然就不属于Memory Leak啦！题外话：众所周知IMG是replaced element，其width和height属性缺省值又外部资源决定，而我们通过CSS设置的width和height属性均是对缺省值的二次加工。假设图片原始尺寸为width:200px/height:400px，现在通过CSS设置width:100px，那么图片将按等比例缩放为 width:100px/height:200px；但通过CSS设置width:100px/height:100px时，那么图片则不是按等比例缩放 了。六、监控工具　 监控方式多种多样，这里大概分为两类：1. 当前页面泄漏：Windows的任务管理器、Chrome->dev tools->Profiles->Take Heap Snapshot/Record Heap Allocations等等2. 跨页面泄漏：sIEve操作步骤：1. 在Address输入框输入网址，点击Go （浏览网页）2. 执行测试用例3. 点击about:blank按钮（跳转到空白页）4. 查看#leaks列下是否有增长，有则表示出现跨页面的内存泄漏感谢各位的阅读，以上就是“怎么用JS理解IE的内存泄露”的内容了，经过本文的学习后，相信大家对怎么用JS理解IE的内存泄露这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: HTML中的标签怎么用

这篇文章给大家分享的是有关HTML中的 irefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。 定义和用法 如需对全部列应用样式， 提示 提示：请为 注：col 元素是仅包含属性的空元素。如需创建列，…