浏览器垃圾回收机制与 Vue 项目内存泄漏场景分析

这个例子在一个 DOM 元素 element 与一个原生js对象 myObject 之间创建了循环引用。其中，变量 myObject 有一个属性 e 指向 element 对象;而变量 element 也有一个属性 o 回指 myObject。由于存在这个循环引用，即使例子中的 DOM 从页面中移除，它也永远不会被回收。

举个栗子：

• 黄色是指直接被 js变量所引用，在内存里
• 红色是指间接被 js变量所引用，如上图，refB 被 refA 间接引用，导致即使 refB 变量被清空，也是不会被回收的
• 子元素 refB 由于 parentNode 的间接引用，只要它不被删除，它所有的父元素(图中红色部分)都不会被删除

另一个例子：

window.onload=function outerFunction(){ 
 var obj = document.getElementById("element"); 
 obj.onclick=function innerFunction(){}; 
}; 

这段代码看起来没什么问题，但是 obj 引用了 document.getElementById('element')，而 document.getElementById('element') 的 onclick 方法会引用外部环境中的变量，自然也包括 obj，是不是很隐蔽啊。(在比较新的浏览器中在移除Node的时候已经会移除其上的event了，但是在老的浏览器，特别是 IE 上会有这个 bug)

解决办法：

最简单的方式就是自己手工解除循环引用，比如刚才的函数可以这样

myObject.element = null; 
element.o = null; 
 
window.onload=function outerFunction(){ 
 var obj = document.getElementById("element"); 
 obj.onclick=function innerFunction(){}; 
 obj=null; 
}; 

将变量设置为 null 意味着切断变量与它此前引用的值之间的连接。当垃圾回收器下次运行时，就会删除这些值并回收它们占用的内存。

要注意的是，IE9+ 并不存在循环引用导致 DOM 内存泄露问题，可能是微软做了优化，或者 DOM 的回收方式已经改变。

4. 内存管理

4.1 什么时候触发垃圾回收?

垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。IE6的垃圾回收是根据内存分配量运行的，当环境中存在256个变量、4096个对象、64k的字符串任意一种情况的时候就会触发垃圾回收器工作，看起来很科学，不用按一段时间就调用一次，有时候会没必要，这样按需调用不是很好吗?但是如果环境中就是有这么多变量等一直存在，现在脚本如此复杂，很正常，那么结果就是垃圾回收器一直在工作，这样浏览器就没法儿玩儿了。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!