Memlab，一款分析 JavaScript 堆并查找瀏覽器和 Node.js 中內存泄漏的開源框架 原創 為少 黑客下午茶
Memlab 是一款 E2E 測試和分析框架，用于發現 JavaScript 內存泄漏和優化機會。
Memlab 是 JavaScript 的內存測試框架。它支持定義一個測試場景（使用 Puppeteer API），教 Memlab 如何與您的單頁應用程序（SPA）交互，Memlab 可以自動處理其余的內存泄漏檢查：
- 與瀏覽器交互并獲取 JavaScript 堆快照
- 分析堆快照并過濾掉內存泄漏
- 聚合和分組類似的內存泄漏
- 生成用于內存調試的保留器跟蹤
安裝 Memlab
npm install -g memlab
memlab help
在 Demo App 中檢測泄漏
使用 Memlab 檢測分離的 DOM 元素的教程。Demo 源碼：
https://github.com/facebookincubator/memlab/tree/main/packages/e2e/static/example
設置示例 Web App
當您單擊 “Create detached DOMs” 按鈕時，Demo app 會泄漏分離的 DOM 元素。每次單擊都會創建 1024 個分離的 DOM 元素，這些元素由 window 對象引用。
// @nolint
import Link from 'next/link';
import React from 'react';
export default function DetachedDom() {
const addNewItem = () => {
if (!window.leakedObjects) {
window.leakedObjects = [];
}
for (let i = 0; i < 1024; i++) {
window.leakedObjects.push(document.createElement('div'));
}
console.log('Detached DOMs are created. Please check Memory tab in devtools')
};
return (
<div className="container">
<div className="row">
<Link href="/">Go back</Link>
</div>
<br />
<div className="row">
<button type="button" className="btn" onClick={addNewItem}>
Create detached DOMs
</button>
</div>
</div>
);
}
源文件：packages/e2e/static/example/pages/examples/detached-dom.jsx
1. 克隆倉庫
要在本地機器上運行 demo，請克隆 memlab github 存儲庫：
https://github.com/facebookincubator/memlab
git clone git@github.com:facebookincubator/memlab.git
2. 運行示例 App
從 Memlab 項目的根目錄運行以下命令：
cd packages/e2e/static/example
npm install
npm run dev
這將啟動一個示例 Nextjs app。讓我們通過從瀏覽器訪問 http://localhost:3000 來確保它正在運行：
這里測試的是 Example 1。
查找內存泄漏
1.創建一個場景文件
// @nolint
// memlab/packages/e2e/static/example/scenario/detached-dom.js
/**
* 我們要運行的場景的初始 `url`。
*/
function url() {
return "http://localhost:3000/examples/detached-dom";
}
/**
* 指定 memlab 應如何執行您要測試該 action 是否導致內存泄漏的 action。
*
* @param page - Puppeteer's page object:
* https://pptr.dev/api/puppeteer.page/
*/
async function action(page) {
const elements = await page.$x(
"http://button[contains(., 'Create detached DOMs')]"
);
const [button] = elements;
if (button) {
await button.click();
}
// 從 memlab 清理外部引用
await Promise.all(elements.map(e => e.dispose()));
}
/**
* 指定 memlab 應如何執行將重置您在上面執行的 action 的 action。
*
* @param page - Puppeteer's page object:
* https://pptr.dev/api/puppeteer.page/
*/
async function back(page) {
await page.click('a[href="/"]');
}
module.exports = { action, back, url };
這個文件在 packages/e2e/static/example/scenario/detached-dom.js。
2.運行 memlab
這可能需要幾分鐘：
cd packages/e2e/static/example
npm run dev # 注意啟動 Demo
memlab run --scenario scenarios/detached-dom.js
3.調試泄漏跟蹤
對于每個泄漏的對象組，memLab 打印一個具有代表性的泄漏跟蹤。
讓我們從上到下分解結果：
第 1 部分：瀏覽器交互面包屑顯示了按照我們的場景文件中指定的方式執行的瀏覽器交互（導航）memlab。
- page-load[6.5MB](baseline)[s1]? - 初始頁面加載時 JavaScript 堆大小為 6.5MB。baseline? 堆快照將在磁盤上保存為 s1.heapsnapshot。
- action-on-page[6.6MB](baseline)[s2]? - 單擊 “Create detached DOMs”? 按鈕后，堆大小增加到 6.6MB。
- revert[7MB](final)[s3] - 在離開觸發內存泄漏的頁面后，該網頁最終達到了 7MB。
第 2 部分：泄漏跟蹤的總體摘要
- 1024 leaks? - 有 1024 個泄漏的對象。example app 的第 12 行在 for 循環中創建了 1024 個分離的 DOM 對象。
- Retained size - 泄漏對象集群的聚合保留大小為 143.3KB（內存泄漏根據保留跟蹤的相似性分組在一起）。
第 3 部分：每個泄漏簇的詳細代表泄漏跟蹤
- 泄漏跟蹤是從 GC 根（垃圾收集器遍歷堆的堆圖中的入口對象）到泄漏對象的對象引用鏈。跟蹤顯示泄漏的對象為何以及如何在內存中仍然保持活動狀態。打破引用鏈意味著泄漏的對象將不再可以從 GC 根訪問，因此可以進行垃圾回收。
- 通過從原生 Window（即 GC 根）向下逐個跟蹤泄漏跟蹤，您將能夠找到應該設置為 null 的引用（但這不是由于bug 引起的）。
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 對象到泄漏對象的泄漏跟蹤路徑為：
[window](object) -> leakedObjects(property) -> [Array](object)
-> 0(element) -> [Detached HTMLDIVElement](native)
與示例中的泄漏代碼匹配：
window.leakedObjects = [];
for (let i = 0; i < 1024; i++) {
window.leakedObjects.push(document.createElement('div'));
}
