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

前端桃园

共 3327字,需浏览 7分钟

 ·

2021-01-29 12:42

作者: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 = {
  btndocument.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>