// monitor-leak.js
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: false, // 方便調(diào)試觀察
    args: ['--js-flags="--expose-gc"'] // 關(guān)鍵：允許手動(dòng)觸發(fā)垃圾回收
  });
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/target-page');
  // 1. 獲取基準(zhǔn)內(nèi)存
  await page.evaluate(() => window.gc()); // 強(qiáng)制 GC
  const initialMemory = await page.metrics();
  console.log(`初始 JSHeapSize: ${initialMemory.JSHeapUsedSize / 1024 / 1024} MB`);
  // 2. 模擬用戶操作（重復(fù)多次以放大泄漏效果）
  for (let i = 0; i < 10; i++) {
    await page.click('#open-dialog-btn');
    await page.waitForSelector('.dialog');
    await page.click('#close-dialog-btn');
    await page.waitForSelector('.dialog', { hidden: true });
  }
  // 3. 再次強(qiáng)制 GC 并檢測(cè)
  await page.evaluate(() => window.gc());
  const finalMemory = await page.metrics();
  console.log(`操作后 JSHeapSize: ${finalMemory.JSHeapUsedSize / 1024 / 1024} MB`);
  const diff = finalMemory.JSHeapUsedSize - initialMemory.JSHeapUsedSize;
  // 4. 設(shè)置閾值判斷（例如增長(zhǎng)超過(guò) 1MB 視為泄漏）
  if (diff > 1024 * 1024) {
    console.error(`檢測(cè)到內(nèi)存泄漏! 增長(zhǎng)量: ${diff / 1024} KB`);
  } else {
    console.log('內(nèi)存使用正常');
  }
  await browser.close();
})();

/**
 * 簡(jiǎn)單的內(nèi)存監(jiān)控上報(bào)函數(shù)
 * 建議在頁(yè)面空閑時(shí)或定期執(zhí)行
 */
function reportMemoryUsage() {
  // 僅 Chrome/Edge 支持
  if (performance && performance.memory) {
    const {
      jsHeapSizeLimit, // 內(nèi)存大小限制
      totalJSHeapSize, // 可使用的內(nèi)存
      usedJSHeapSize   // 實(shí)際使用的內(nèi)存
    } = performance.memory;
    const usedMB = usedJSHeapSize / 1024 / 1024;
    console.log(`當(dāng)前內(nèi)存使用: ${usedMB.toFixed(2)} MB`);
    // 設(shè)置報(bào)警閾值，例如超過(guò) 50MB 或 占比過(guò)高時(shí)上報(bào)
    // 注意：這里的數(shù)值包含未回收的垃圾，僅作趨勢(shì)參考
    if (usedMB > 50) {
      // sendToAnalytics({ type: 'memory_warning', value: usedMB });
    }
  }
}
// 示例：每 10 秒采樣一次
setInterval(reportMemoryUsage, 10000);

module.exports = {
  // 初始訪問(wèn)地址
  url: () => 'http://localhost:3000',
  // 交互操作：通常是觸發(fā)泄漏的操作
  action: async (page) => {
    await page.click('button#trigger-action');
    // 等待操作完成
    await new Promise(r => setTimeout(r, 500));
  },
  // 回退操作：試圖讓頁(yè)面回到初始狀態(tài)
  back: async (page) => {
    await page.click('button#reset-state');
    // 等待狀態(tài)恢復(fù)
    await new Promise(r => setTimeout(r, 500));
  },
  // 過(guò)濾規(guī)則：只關(guān)注特定的泄漏對(duì)象（可選）
  leakFilter: (node, snapshot, leakerRoots) => {
    // 例如只關(guān)注分離的 DOM 元素
    return node.type === 'native' && node.name.startsWith(' Detached'); 
  },
};

// 調(diào)試工具類：用于監(jiān)測(cè)組件或?qū)ο笫欠癖换厥?
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`? 對(duì)象 [${heldValue}] 已被垃圾回收`);
});
export function observeObject(obj, name) {
  registry.register(obj, name);
}
// 使用示例（例如在 Vue/React 組件中）
// mounted / useEffect:
// let heavyObject = { data: new Array(10000) };
// observeObject(heavyObject, 'MyHeavyData');
// heavyObject = null; // 解除引用，理論上應(yīng)該觸發(fā)上面的回調(diào)