前端常见内存泄漏及解决方案

作者：lzg9527
https://juejin.cn/post/6914092198170460168

最近收到测试人员的反馈说我们开发的页面偶现卡死，点击无反应的情况，特别是打开页面较久的时候发生概率较高。打开任务管理器，看到内存占有率已经很高了，初步判断可能存在内存泄漏的情况。下面排查内存泄漏的原因。

系统进程不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。当内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。Chrome 限制了浏览器所能使用的内存极限（64 位为 1.4GB，32 位为 1.0GB）

引起内存泄漏的原因

意外的全局变量

由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中，全局对象就是 window 对象。变量在窗口关闭或重新刷新页面之前都不会被释放，如果未声明的变量缓存大量的数据，就会导致内存泄露。

未声明变量

function fn() {
  a =  global variable 
}
fn()

使用 this 创建的变量(this 的指向是 window)。

function fn() {
  this.a =  global variable 
}
fn()

解决方法：

避免创建全局变量
使用严格模式,在 JavaScript 文件头部或者函数的顶部加上 use strict。

闭包引起的内存泄漏

原因：闭包可以读取函数内部的变量，然后让这些变量始终保存在内存中。如果在使用结束后没有将局部变量清除，就可能导致内存泄露。

function fn () {
  var a = "I m a";
  return function () {
    console.log(a);
  };
}

解决：将事件处理函数定义在外部，解除闭包，或者在定义事件处理函数的外部函数中。

比如：在循环中的函数表达式，能复用最好放到循环外面。

// bad
for (var k = 0; k < 10; k++) {
  var t = function (a) {
    // 创建了10次  函数对象。
    console.log(a)
  }
  t(k)
}

// good
function t(a) {
  console.log(a)
}
for (var k = 0; k < 10; k++) {
  t(k)
}
t = null

没有清理的 DOM 元素引用

原因：虽然别的地方删除了，但是对象中还存在对 dom 的引用。

// 在对象中引用DOM
var elements = {
  btn: document.getElementById( btn ),
}
function doSomeThing() {
  elements.btn.click()
}

function removeBtn() {
  // 将body中的btn移除, 也就是移除 DOM树中的btn
  document.body.removeChild(document.getElementById( button ))
  // 但是此时全局变量elements还是保留了对btn的引用, btn还是存在于内存中,不能被GC回收
}

解决方法：手动删除，elements.btn = null。

被遗忘的定时器或者回调

定时器中有 dom 的引用，即使 dom 删除了，但是定时器还在，所以内存中还是有这个 dom。

// 定时器
var serverData = loadData()
setInterval(function () {
  var renderer = document.getElementById( renderer )
  if (renderer) {
    renderer.innerHTML = JSON.stringify(serverData)
  }
}, 5000)

// 观察者模式
var btn = document.getElementById( btn )
function onClick(element) {
  element.innerHTMl = "I m innerHTML"
}
btn.addEventListener( click , onClick)

解决方法：

手动删除定时器和 dom。
removeEventListener 移除事件监听

vue 中容易出现内存泄露的几种情况

在 Vue SPA 开发应用，那么就更要当心内存泄漏的问题。因为在 SPA 的设计中，用户使用它时是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。因此开发过程中，你需要时刻警惕内存泄漏的问题。

全局变量造成的内存泄露

声明的全局变量在切换页面的时候没有清空

<template>
  <div id="home">这里是首页</div>
</template>

<script>
  export default {
    mounted() {
      window.test = {
        // 此处在全局window对象中引用了本页面的dom对象
        name:  home ,
        node: document.getElementById( home ),
      }
    },
  }
</script>

解决方案:在页面卸载的时候顺便处理掉该引用。

destroyed () {
  window.test = null // 页面卸载的时候解除引用
 }

监听在 window/body 等NYB\ˉ^X H N\[]X[^PBJBKYN[[ H9g9$y.H/oo%y.9.+yfi:/(9.bc9!ymg\[X\ B\N[KKB\ OOT:f,haykf9#bczgh+c!zfi9o%yggn.:ax/a+/h9.#yc9ob9i&"y&y. 9o,yo`9.cy"z`&aykf9#T: ,:/I9a.)99l9k XNXZ]9dZ\8./9o%y`+yaiyg繥-.b-.g+i9am.hz`#yayo%y+hI`繥-.b-/&!9f繥-+hy`9ch9aykf8H\HHH\H[YY N]Z\ B[[Y[ N[Y[[[Y[RY ^[\H BK [[Y[Y][BK [[Y[ BOO."gh. y.+Iab99n 9.Z\9k/-d#l!. 9.:"/g9..e+d#ykf9aiz+/nml!. 9.9/k.e+`/ . :-m/gZ\:ah/Z\:ahk[[Y[9o%yl,y+%y.#y/&(iyg繥-.b-9d+9.\[\9khyo:` d"9Z\9iykH\HHH\H[YY9. LB[KY][\[\X[\[B9. L\[\ N]Z\ B\[\ [K[\B[KY][\[\X\[\ [JK[BOO. H9m HH9ioyi!9+XNd+9al9+Z\:ah. 99khH[H99i,I.#kd+9al[\9.g99i,x[OH^X[YY-gg*99+g: !xi;]