【前端内存泄漏】一文详解内存泄漏的原理、原因、解决方案

首先，了解一下内存泄漏的概念：

程序在不需要使用某些对象或数据时，没有及时释放它们的内存，导致内存使用量不断增加，最终可能导致性能下降甚至浏览器崩溃。

比如：我在首页组件index.vue中定义了很多定时器setTimeout和全局变量，没有对定时器执行clearTimeout，也没有将全局变量清除掉，然后我切到个人中心user.vue中了，那这些定时器和全局变量还一直在内存里。一个页面还好，要是很多页面全是这种，那岂不是一会儿内存就爆了？这样的情况就被称为内存泄露。

会引起内存泄漏的原因

1. 莫名的全局变量

（1）变量未声明

// 未声明的变量默认使用window创建，即全局变量。 function fnA() {   a = 123 } fnA()

（2）this创建变量

// this指向的是永远是调用者 function fnB() {   this.a = 123 } // 这里的fnB隐式调用，等价于window.fnB()，所以this指向的就是其调用者window fnB()

全局变量还是要尽可能少用，如果用了，在合适的情况下，将其释放（将其赋值null或undefined）

2. 未清理的定时器

let timer1 = setTimeout(() => {      console.log(123) }, 1000); let timer2 = setInterval(() => {      console.log(123) }, 1000);  // 在适当时机清除 clearTimeout(timer1); clearInterval(timer2);

3. 闭包

闭包可以创建一个独立的环境，能让外部访问函数内部变量，但同时局部变量会常驻在内存中，长时间不被释放，造成内存泄漏。

（1）局部变量避免使用很大的对象

// 局部变量避免使用很大的对象 function createClosure() {     let largeObject = {          ......     };     return function() {         console.log(largeObject);     }; }  // 大对象从外部传 function createClosure(largeObject) {     return function() {         console.log(largeObject);     }; } 

（2）手动释放引用

function createClosure() {     let largeObject = {          ......      };     let closure = function() {         console.log(largeObject);     };      // 使用完毕后清理     largeObject = null;     return closure; } 

希望能帮到你！