Memlab，一款分析 JavaScript 堆并查找浏览器和 Node.js 中内存泄漏的开源框架 原创 为少 黑客下午茶

Memlab 是一款 E2E 测试和分析框架，用于发现 JavaScript 内存泄漏和优化机会。,Memlab 是 JavaScript 的内存测试框架。它支持定义一个测试场景（使用 Puppeteer API），教 Memlab 如何与您的单页应用程序（SPA）交互，Memlab 可以自动处理其余的内存泄漏检查：,使用 Memlab 检测分离的 DOM 元素的教程。Demo 源码：,https://github.com/facebookincubator/memlab/tree/main/packages/e2e/static/example,当您单击 “Create detached DOMs” 按钮时，Demo app 会泄漏分离的 DOM 元素。每次单击都会创建 1024 个分离的 DOM 元素，这些元素由 window 对象引用。,,源文件：packages/e2e/static/example/pages/examples/detached-dom.jsx,1. 克隆仓库,要在本地机器上运行 demo，请克隆 memlab github 存储库：,https://github.com/facebookincubator/memlab,2. 运行示例 App,从 Memlab 项目的根目录运行以下命令：,这将启动一个示例 Nextjs app。让我们通过从浏览器访问 http://localhost:3000 来确保它正在运行：,,这里测试的是 Example 1。,1.创建一个场景文件,这个文件在 packages/e2e/static/example/scenario/detached-dom.js。,2.运行 memlab,这可能需要几分钟：,,3.调试泄漏跟踪,对于每个泄漏的对象组，memLab 打印一个具有代表性的泄漏跟踪。,,让我们从上到下分解结果：,第 1 部分：浏览器交互面包屑显示了按照我们的场景文件中指定的方式执行的浏览器交互（导航）memlab。,第 2 部分：泄漏跟踪的总体摘要,第 3 部分：每个泄漏簇的详细代表泄漏跟踪,map - 这是正在访问的对象的 V8 HiddenClass（V8 在内部使用它来存储有关对象形状的元信息和对其原型的引用 - 在此处查看更多信息）- 在大多数情况下，这是 V8 实现细节，可以忽略。,https://v8.dev/blog/fast-properties#hiddenclasses-and-descriptorarrays,prototype - 这是 Window 类的实例。,leakedObjects - 这表明 leakedObjects 是 Window 对象的一个属性，大小为 148.5KB，指向一个 Array 对象。,0 - 这表明分离的 HTMLDIVElement（即当前未连接到 DOM 树的 DOM 元素）被存储为leakedObjects 数组的第一个元素（由于显示所有 1024 条泄漏痕迹是压倒性的，Memlab 只打印一个具有代表性的泄漏痕迹。即属性 0 而不是属性 0->1023),简而言之，从 Window 对象到泄漏对象的泄漏跟踪路径为：,与示例中的泄漏代码匹配：,