PaulChess / MyBlog

1 stars 0 forks source link

JS内存泄露 #22

Open PaulChess opened 3 years ago

PaulChess commented 3 years ago

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

PaulChess commented 3 years ago

引起内存泄露的原因

  1. 意外全局变量 在全局对象上创建变量的引用,如果是在浏览器中,全局对象就是window; 变量在窗口关闭或重新刷新页面之前都不会被释放; 如果未声明的变量缓存大量的数据,就会导致内存泄露
    
    // 未声明的全局变量
    function fn() {
    a = 'global variable';
    }
    fn()

// 使用this创建的变量(this => window) function fn() { this.a = 'global variable'; } fn()

解决方法:
* 避免创建全局变量
* 使用严格模式: 在js文件头部或函数顶部加上`use strict`

2. 闭包
闭包可以读取函数内部的变量,将这些变量始终保存在内存中。如果使用结束后
没有将局部变量清除,就可能导致内存泄露。
```javascript
function fn() {
  var a = 'i m a';
  return function() {
    console.log(a);
  }
}
fn()

解决: 将事件处理函数定义在外部,解除闭包,或者定义在事件处理函数的外部函数中。 例子:

// 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; // 释放。

.... 未完.............