知食

Appearance

On this page

内存泄露 ​

常见的内存泄露 ​

  1. 意外的全局变量
  2. 定时器
  3. 闭包引用变量
  4. 没有清理 DOM 引用同样会造成内存泄漏
  5. addEventListener 监听

意外的全局变量 ​

js
function foo(arg) {
  bar = "this is a hidden global variable";
}

另一种是全局变量可能有 this 创建

js
function foo() {
  this.variable = "potential accidental global";
}

// foo 调用自己，this 指向了全局对象（window）
foo();

上述使用严格模式，可以避免意外全局变量

定时器 setInterval ​

定时器要记得清除

js
var someResource = getData();

setInterval(function () {
  var node = document.getElementById('Node');
  if (node) {
    // 处理 node 和 someResource
    node.innerHTML = JSON.stringify(someResource)
  }
}, 1000);

闭包引用变量 ​

包括我们之前所说的闭包，维持函数内局部变量，使其得不到释放

js
function bindEvent() {
  var obj = document.createElement('XXX');
  var unused = function () {
    console.log(obj, '闭包内引用obj obj不会被释放');
  };
  obj = null; // 解决方法
}

没有清理 DOM 引用同样会造成内存泄漏 ​

js
const refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除了
console.log(refA, 'refA'); // 但是还存在引用能console出整个div 没有被回收
refA = null;
console.log(refA, 'refA'); // 解除引用

addEventListener 监听 ​

包括使用事件监听addEventListener监听的时候，在不监听的情况下使用removeEventListener取消对事件监听

参考 ​