JavaScript内存泄漏常见场景与Vue解决方案详解

本文通过具体实例，详细解析JavaScript中引发内存泄漏的几种典型情况，旨在为开发者提供参考与警示。

核心概念解析：

JavaScript内置的垃圾回收机制会定期扫描内存空间。当某个内存单元不再被任何变量引用时，垃圾回收器会自动将其释放。然而，若变量已不再使用却仍被其他对象引用，导致垃圾回收器无法识别其可回收状态，便形成了内存泄漏。在传统多页面Web应用中，每次页面跳转都会触发内存释放，因此泄漏现象往往不易察觉。

在Vue等单页面应用（SPA）中，Web App与传统Web应用存在显著差异。由于SPA通过路由切换视图而不刷新整个页面，未正确清理的内存会不断累积，最终导致页面运行卡顿甚至崩溃。

主要泄漏点梳理：

1. DOM或BOM对象未被正确释放。 2. Script代码中持续持有对DOM/BOM对象的引用。 3. JavaScript对象自身发生泄漏。 4. 常见原因为闭包，例如事件处理回调函数导致DOM对象与脚本对象之间形成双向引用，这是最常见的泄漏诱因。

代码审查关键点：

1. 关注DOM中的addEventListener函数及其衍生方法，例如jQuery的on函数、Vue组件实例的$on方法，以及第三方库的初始化函数。 2. 注意其他BOM对象的事件监听，如WebSocket实例的on方法。 3. 避免创建不必要的函数引用。 4. 若使用render函数，应避免在HTML标签中直接绑定DOM/BOM事件。

Vue框架的应对策略：

1. 若在mounted或created钩子中绑定了DOM/BOM对象的事件，必须在beforeDestroy钩子中进行对应的解绑操作。 2. 若在mounted或created钩子中初始化了第三方库，需在beforeDestroy中进行对应的销毁处理。 3. 若组件内使用了定时器，必须在beforeDestroy中清除定时器。 4. 模板中不应使用表达式绑定特定处理函数，相关逻辑应移至处理函数内部。 5. 若在mounted或created钩子中使用了$on，必须在beforeDestroy中进行对应的解绑（即调用$off）。 6. 部分组件在模板中使用事件绑定可能引发泄漏，建议改用$on方法替代模板中的直接绑定。

更多Vue官方关于避免内存泄漏的讲解可参考：https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html

此外，在IE及Edge浏览器环境下，Vue父子组件交互场景需注意：当子组件依赖父组件状态，并通过v-if控制显示时，若子组件修改父组件状态以更新自身展示，随后父组件切换v-if状态导致子组件DOM结构被移除，此时子组件占用的内存可能未被释放。当父组件再次切换v-if状态重新展示子组件时，内存占用会飙升，多次重复切换后会导致页面明显卡顿。

JavaScript常见内存泄漏情况汇总：

1. 闭包导致的内存泄漏

function fn1(){
  var n=1;
}
//我想取到里面的局部变量n
function fn1(){
  var n=1;
  function fn2(){//在加一个fn2当他的子集
    alert(n);
  }
 
}

如果需要在外部访问内部变量，可以通过return语句将其暴露出来。

function fn1(){
  var n=1;
  function fn2(){//在加一个fn2当他的子集
    alert(n);
  }
return fn2(); 
//return出来后 他就给 window了所以一直存在内存中。因为一直在内存中，在IE里容易造成内存泄漏
}
fn1();

建议在编码时尽量避免此类情况。

2. 意外创建的全局变量

未使用var、let或const声明的变量引用，会在全局对象中创建一个新的全局变量。在浏览器环境中，全局对象即为window。

function foo(arg) {
  bar = "aaaaa";
}
 
实际上等价于
function foo(arg) {
  window.bar = "aaaaa";
}

function foo() {
  this.variable = "qqqqq";
}
//this 指向全局对象（window）
foo();

为防止此类错误，可在JavaScript文件开头添加 'use strict'; 语句以启用严格模式。

3. 定时器（setTimeout/setInterval）未清理

当不再需要setInterval或setTimeout时，若未调用clear方法清除定时器，其回调函数及内部依赖的变量将无法被回收，从而造成内存泄漏。例如，Vue中使用定时器时，必须在beforeDestroy钩子中进行销毁处理，原生JavaScript同理。

clearTimeout(***)
clearInterval(***)

4. 若在mounted/created钩子中使用了$on，必须在beforeDestroy中进行对应的解绑（$off）处理。

beforeDestroy() {
 this.bus.$off('****');
}

5. 给DOM对象添加的属性若为对象引用

var testObject = {}; 
document.getElementById('idname').property = testObject; //如果DOM不被消除，则testObject会一直存在，造成内存泄漏

解决方法：

在window.onunload事件中执行以下代码：

window.onunload=function(){
  document.getElementById('idname').property = null;     //释放内存
};

6. DOM对象与JavaScript对象相互引用

function testObject(element) { 
this.elementReference = element;   // 为testObject(js)对象的属性绑定element(DOM)对象
element.property = this;    // 为element(DOM)对象的属性绑定testObject(js)对象
} 
new testObject(document.getElementById('idname'));

解决方法：

在window.onunload事件中执行以下代码：

document.getElementById('idname').property = null;

7. 从外到内执行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.createElement("div"); 
parentDiv.appendChild(childDiv); 
document.body.appendChild(parentDiv); 

8. 反复重写同一属性会造成大量内存占用（但在关闭IE浏览器后内存会被释放）。

for(i = 0; i < 5000; i++) { 
  hostElement.text = "asdfasdfasdf"; 
} 

上述代码逻辑相当于定义了5000个属性！

9. 注意程序逻辑，避免陷入“死循环”等导致内存持续增长的场景。

10. ECharts配合循环计时器等组件使用时也可能出现内存泄漏。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码的运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述的案例分析与解决方案对大家的JavaScript程序设计有所帮助。