记一次前端内存泄露经验

最近进行了第一次深入的Web JS内存优化。遇到了一些问题在此记录。

确保环境正常

许多工具和三方库会在开发模式下有特定的debug逻辑，可能会导致内存泄漏。 最好是在production模式下进行调试，但是即使如此，也有可能会受到干扰。

我在本次调试中发现了以下几点需要注意的外部环境问题

• React Chrome DevTool会持有上一次渲染的状态，导致内存泄漏
• Dexie Debug模式下会导致内存泄露
• Chrome Console全局句柄会持有一些使用过的变量

需要手动销毁

一些第三方库可能需要手动销毁对象，这通常是由于使用了ArrayBuffer等native对象。

例如Three.js，专门有一篇文档：如何废置对象

不过此类问题比较容易发现，也容易解决。

Worker

• Worker对象会链接到C++ Root，无法被回收。
• 对于普通的Worker，需要调用terminate方法终止，即可断开被C++ Root的引用。
• 对于SharedWorker，没有terminate方法，即永远无法回收，需要注意重复使用。

闭包

闭包的行为不一致，暂时还没有研究原理，下面给出两个例子。

期望的行为

function test(a, b) {
  console.log(b);
  return () => {
    console.log('test', a); //期望只捕获a变量
  };
}

不期望的行为

async function create() {
  const res = {}
  return new Promise((resolve, reject) => {
    res.onsuccess = (e) => {
      resolve(e); // 期望只捕获resolve
    };
    res.onerror = (e) => {
      reject(e); // 期望只捕获reject
    }
    console.log('return')
  })
}