如何避免JavaScript中的内存泄漏？

什么是内存泄漏以及如何发现它？

什么是内存泄漏？

JavaScript对象被保存在浏览器内存的堆中，并通过引用方式访问。值得一提的是，JavaScript垃圾回收器则运行于后台，并通过识别无法访问的对象来释放并恢复底层存储空间，从而保证JavaScript引擎的良好运行状态。当内存中的对象在垃圾回收周期中应该被清理时，若它们被另一个仍然存在于内存中的对象通过一个意外的引用所持有，就会引发内存泄漏问题。

这种情况下，冗余对象会继续占据内存空间，导致应用程序消耗过多的内存资源，并可能导致性能下降和表现不佳的情况出现。因此，及时清理无用对象并释放内存资源是至关重要的，以确保应用程序的正常运行和良好的性能表现。如何发现内存泄漏？那么如何知道代码中是否存在内存泄漏？内存泄漏往往隐蔽且很难检测和定位。即使代码中存在内存泄漏，浏览器在运行时也不会返回任何错误。

如果注意到页面的性能逐渐下降，可以使用浏览器内置的工具来确定是否存在内存泄漏以及是哪个对象引起的。任务管理器（不要与操作系统的任务管理器混淆）提供了浏览器中所有选项卡和进程的概览。Chrome 中，可以通过在 Linux 和 Windows 操作系统上按 Shift+Esc 来打开任务管理器；而在 Firefox 中，通过在地址栏中键入 about:performance 则可以访问内置的管理器，它可以显示每个标签的 JavaScript 内存占用情况。如果网站停留在那里什么都不做，但 JavaScript内存使用量逐渐增加，那很可能是存在内存泄漏。

开发者工具提供了一些先进的内存管理方法，例如，使用Chrome浏览器的性能记录工具，可以对页面的性能进行可视化分析。在这个过程中，可以通过一些指标来判断是否存在内存泄漏问题，比如堆内存使用量增加的情况，并及时采取措施解决这些问题，以确保应用程序的正常运行和良好的性能表现。

另外，通过Chrome和Firefox的开发者工具提供的内存工具，可以进一步探索内存使用情况。队列内存使用快照的比较可以显示在两个快照之间分配了多少内存以及分配的位置，并提供额外信息来帮助识别代码中存在问题的对象。这些工具为开发者提供了便利，能够更好地进行内存管理和性能优化，提高应用程序的质量和性能。

JavaScript代码中常见的内存泄漏的常见来源：

研究内存泄漏问题就相当于寻找符合垃圾回收机制的编程方式，有效避免对象引用的问题。下面小编就为大家介绍几个常见的容易导致内存泄漏的地方：

1.全局变量

全局变量始终存储在根目录下，且永远不会被回收。而在JavaScript的开发中，一些错误会导致局部变量被转换到了全局，尤其是在非严格的代码模式下。下面是两个常见的局部变量被转化到全局变量的情况：

1. 为未声明的变量赋值
2. 使用this指向全局对象。

function createGlobalVariables() {
  leaking1 = 'I leak into the global scope'; // 为未声明的变量赋值
  this.leaking2 = 'I also leak into the global scope'; // 使用this指向全局对象
};
createGlobalVariables();
window.leaking1; 
window.leaking2; 

注意：严格模式（"use strict"）将帮助您避免上面示例中的内存泄漏和控制台错误。

2.闭包

函数中定义的变量会在函数退出调用栈并且在函数外部没有指向它的引用时被清除。而闭包则会保持被引用的变量一直存在，即便函数的执行已经终止。

function outer() {
  const potentiallyHugeArray = [];

  return function inner() {
    potentiallyHugeArray.push('Hello'); // function inner is closed over the potentiallyHugeArray variable
    console.log('Hello');
  };
};
const sayHello = outer(); // contains definition of the function inner

function repeat(fn, num) {
  for (let i = 0; i < num; i++){
    fn();
  }
}
repeat(sayHello, 10); // each sayHello call pushes another 'Hello' to the potentiallyHugeArray

// now imagine repeat(sayHello, 100000)

3.定时器

在JavaScript中，使用使用 setTimeout 或 setInterval函数引用对象是防止对象被垃圾回收的最常见方法。当在代码中设置循环定时器（可以使 setTimeout 表现得像 setInterval，即使其递归）时，只要回调可调用，定时器回调对象的引用就会永远保持活动状态。

如果事件监听器只需要运行一次，addEventListener() 可以带有第三个参数，一个提供附加选项的对象。只要将 {once: true} 作为第三个参数传递给 addEventListener()，监听器将在事件处理一次后自动删除。

document.addEventListener('keyup', function listener() {
  doSomething(hugeString);
}, {once: true}); // listener will be removed after running once

一种有效的解决内存泄漏问题的方法是使用WeakMap。它是一种数据结构，其中键引用被保持为弱引用，并且仅接受对象作为键。如果使用对象作为键，并且它是唯一引用该对象的引用，相关条目将从缓存中移除，并进行垃圾回收。在下面的示例中，当替换user_1后，与之关联的条目将在下一次垃圾回收时自动从WeakMap中移除。

let user_1 = { name: "Peter", id: 12345 };
let user_2 = { name: "Mark", id: 54321 };
const weakMapCache = new WeakMap();

function cache(obj){
  // ...same as above, but with weakMapCache

  return [weakMapCache.get(obj), 'cached'];
}

cache(user_1); // ['Peter has an id of 12345', 'computed']
cache(user_2); // ['Mark has an id of 54321', 'computed']
console.log(weakMapCache); // ((…) => "Peter has an id of 12345", (…) => "Mark has an id of 54321"}
user_1 = null; // removing the inactive user

// Garbage Collector

console.log(weakMapCache); // ((…) => "Mark has an id of 54321") - first entry gets garbage collected