记一次前端内存泄露经验
2022-08-18
Coding
Web
Chrome
React
Profile
👋 ‍️‍️阅读
❤️ 喜欢
💬 评论

记一次前端内存泄露经验

最近进行了第一次深入的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')
  })
}

Copyright © 2020-2022 Dean Xu. All Rights reserved.