Memlab 是一款 E2E 測(cè)試和分析框架，用于發(fā)現(xiàn) JavaScript 內(nèi)存泄漏和優(yōu)化機(jī)會(huì)。

Memlab 是 JavaScript 的內(nèi)存測(cè)試框架。它支持定義一個(gè)測(cè)試場(chǎng)景（使用 Puppeteer API），教 Memlab 如何與您的單頁(yè)應(yīng)用程序（SPA）交互，Memlab 可以自動(dòng)處理其余的內(nèi)存泄漏檢查：

• 與瀏覽器交互并獲取 JavaScript 堆快照
• 分析堆快照并過(guò)濾掉內(nèi)存泄漏
• 聚合和分組類似的內(nèi)存泄漏
• 生成用于內(nèi)存調(diào)試的保留器跟蹤

安裝 Memlab

npm install -g memlab
memlab help

在 Demo App 中檢測(cè)泄漏

使用 Memlab 檢測(cè)分離的 DOM 元素的教程。Demo 源碼：

https://github.com/facebookincubator/memlab/tree/main/packages/e2e/static/example

設(shè)置示例 Web App

當(dāng)您單擊 “Create detached DOMs” 按鈕時(shí)，Demo app 會(huì)泄漏分離的 DOM 元素。每次單擊都會(huì)創(chuàng)建 1024 個(gè)分離的 DOM 元素，這些元素由 window 對(duì)象引用。

// @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. 克隆倉(cāng)庫(kù)

要在本地機(jī)器上運(yùn)行 demo，請(qǐng)克隆 memlab github 存儲(chǔ)庫(kù)：

https://github.com/facebookincubator/memlab

git clone git@github.com:facebookincubator/memlab.git

2. 運(yùn)行示例 App

從 Memlab 項(xiàng)目的根目錄運(yùn)行以下命令：

cd packages/e2e/static/example
npm install
npm run dev

這將啟動(dòng)一個(gè)示例 Nextjs app。讓我們通過(guò)從瀏覽器訪問(wèn) http://localhost:3000 來(lái)確保它正在運(yùn)行：

這里測(cè)試的是 Example 1。

查找內(nèi)存泄漏

1.創(chuàng)建一個(gè)場(chǎng)景文件

// @nolint
// memlab/packages/e2e/static/example/scenario/detached-dom.js
/**
 * 我們要運(yùn)行的場(chǎng)景的初始 `url`。
 */
function url() {
  return "http://localhost:3000/examples/detached-dom";
}

/**
 * 指定 memlab 應(yīng)如何執(zhí)行您要測(cè)試該 action 是否導(dǎo)致內(nèi)存泄漏的 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 應(yīng)如何執(zhí)行將重置您在上面執(zhí)行的 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 };

這個(gè)文件在 packages/e2e/static/example/scenario/detached-dom.js。

2.運(yùn)行 memlab

這可能需要幾分鐘：

cd packages/e2e/static/example
npm run dev # 注意啟動(dòng) Demo
memlab run --scenario scenarios/detached-dom.js

3.調(diào)試泄漏跟蹤

對(duì)于每個(gè)泄漏的對(duì)象組，memLab 打印一個(gè)具有代表性的泄漏跟蹤。

讓我們從上到下分解結(jié)果：

第 1 部分：瀏覽器交互面包屑顯示了按照我們的場(chǎng)景文件中指定的方式執(zhí)行的瀏覽器交互（導(dǎo)航）memlab。

• page-load[6.5MB](baseline)[s1]? - 初始頁(yè)面加載時(shí) JavaScript 堆大小為 6.5MB。baseline? 堆快照將在磁盤上保存為 s1.heapsnapshot。
• action-on-page[6.6MB](baseline)[s2]? - 單擊 “Create detached DOMs”? 按鈕后，堆大小增加到 6.6MB。
• revert[7MB](final)[s3] - 在離開觸發(fā)內(nèi)存泄漏的頁(yè)面后，該網(wǎng)頁(yè)最終達(dá)到了 7MB。

第 2 部分：泄漏跟蹤的總體摘要

• 1024 leaks? - 有 1024 個(gè)泄漏的對(duì)象。example app 的第 12 行在 for 循環(huán)中創(chuàng)建了 1024 個(gè)分離的 DOM 對(duì)象。
• Retained size - 泄漏對(duì)象集群的聚合保留大小為 143.3KB（內(nèi)存泄漏根據(jù)保留跟蹤的相似性分組在一起）。

第 3 部分：每個(gè)泄漏簇的詳細(xì)代表泄漏跟蹤

• 泄漏跟蹤是從 GC 根（垃圾收集器遍歷堆的堆圖中的入口對(duì)象）到泄漏對(duì)象的對(duì)象引用鏈。跟蹤顯示泄漏的對(duì)象為何以及如何在內(nèi)存中仍然保持活動(dòng)狀態(tài)。打破引用鏈意味著泄漏的對(duì)象將不再可以從 GC 根訪問(wèn)，因此可以進(jìn)行垃圾回收。
• 通過(guò)從原生 Window（即 GC 根）向下逐個(gè)跟蹤泄漏跟蹤，您將能夠找到應(yīng)該設(shè)置為 null 的引用（但這不是由于bug 引起的）。

map - 這是正在訪問(wèn)的對(duì)象的 V8 HiddenClass（V8 在內(nèi)部使用它來(lái)存儲(chǔ)有關(guān)對(duì)象形狀的元信息和對(duì)其原型的引用 - 在此處查看更多信息）- 在大多數(shù)情況下，這是 V8 實(shí)現(xiàn)細(xì)節(jié)，可以忽略。

https://v8.dev/blog/fast-properties#hiddenclasses-and-descriptorarrays

prototype - 這是 Window 類的實(shí)例。

leakedObjects - 這表明 leakedObjects 是 Window 對(duì)象的一個(gè)屬性，大小為 148.5KB，指向一個(gè) Array 對(duì)象。

0 - 這表明分離的 HTMLDIVElement（即當(dāng)前未連接到 DOM 樹的 DOM 元素）被存儲(chǔ)為leakedObjects 數(shù)組的第一個(gè)元素（由于顯示所有 1024 條泄漏痕跡是壓倒性的，Memlab 只打印一個(gè)具有代表性的泄漏痕跡。即屬性 0 而不是屬性 0->1023)

簡(jiǎn)而言之，從 Window 對(duì)象到泄漏對(duì)象的泄漏跟蹤路徑為：

[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'));
}