凌晨三点，手机又震了——「页面白屏。JS heap 超过 2GB，已经自动重启三次」。线上前端 OOM 永远在使用者量最大的时候精准暴雷。一边重启 Pod 续命，一边打开 Chrome DevTools，Memory 面板。Record Allocation、对比 Snapshot、筛 Detached DOM、找 Retaining Path…，一套流程下来天亮之前修好算运气好。怎么说呢，问题根因通常就是某个组件卸载时没清定时器、闭包持有了大对象、事件监听打满了引用链——一句话。典型的内存泄漏。

但真正让人崩溃的不是修不好，而是每次发版都可能带入新泄漏而每次验证都要靠人肉点开几十个页面、手工操作、盯半天快照。这事不能再这么干下去了，

问题拆解这方面，为什么“手工查”挡不住线上事故

前端内存泄漏的锅。通常扣在 SPA 里：全局事件没解绑、setInterval 没停、闭包里闭了 DOM、WebSocket 重连连出无穷分身。这些泄漏平时 QA 功能测试根本发现不了因为只要不连续操作足够长时间，堆内存的增长根本不会触发 GC 临界点。按理说，只有真实使用者长时间停留、疯狂交互。才会把 JS heap 推过容器上限，接下来被 OOM Killer 教做人。

常规方案有几种：

• 发版前用 Chrome DevTools 手动走一遍主要链路？ 覆盖范围有限，依赖人的耐力，没人愿意每天点 分钟页面。
• 加 --max-old-space-size 把容器内存顶大？ 治标不治本，只是延缓死刑。
• Lighthouse / PageSpeed？ 它关心的是性能和常用方法，不关心你的堆内存是不是在缓慢涨潮。

结论很明确这方面。需要一个能模拟使用者交互、自动采集堆内存变化、可接入 CI 流水线的检测方案每次 PR 都跑一遍，判定是否引入泄漏。

再看方案设计，为什么不选其他工具。而用 Playwright + CDP

摆在桌面的选项：

1. Puppeteer + 手撸 CDP —— 能力够，但和 Playwright 比多浏览器支持弱，且 API 设计略原始。
2. Cypress —— 测试框架很好。但背后还是 CDP，而且对多页面、多上下文的内存快照控制不够精细，插件环境离内存分析较远。
3. 直接用 Node.js 调 Chrome DevTools Protocol —— 自由度高。但要处理启动、关闭、生命周期，徒增脚手架代码。

最终选 Playwright原因是它自带多浏览器调度，且提供 page.context.newCDPSession可以像用手术刀一样直接和 V8 Heap Profiler 对话。而其他方案要么太远，要么多余。

架构思路很简单：用 Playwright 启动目标页面 → 触发关键使用者流程 → 强制 GC → 采基线内存快照 → 重复操作 → GC → 采最终快照 → 对比差异 → 产出报告 → 在 CI 中以非零退出码拦住 PR.

This chain is split into three core modules:

• 采集层: 通过 CDP 获得堆内存数据。
• 判定层: 一套规则引擎，对比操作前后指标的增长率。
• CI 适配层: 生成结构化输出，适配 GitHub Actions / GitLab CI 的返回码和 Artifacts。

主要实现这方面，从零搭建一个可落地的 Playwright 内存检测脚本

开箱即用的 Node.js 脚本**。至于它的职责，打开页面模拟两次业务操作，对比堆内存增长。>

. 启动浏览器并建立 CDP 会话，获取页面

This code handles Playwright launch and CDP connection。while setting a key flag: --enable-precise-memory-info ,orwise memory data is coarse.

const { chromium } = require;async function main {
const browser = await chromium.launch({
headless: true。// CI 环境必须无头
args这方面，// 解锁精确堆内存数据
});const context = await browser.newContext({
viewport: { width: 1280,height: 800 }
});const page = await context.newPage;不过，// 创建 CDP 会话。直通 V8 Heap Profiler
const cdp = await context.newCDPSession;await cdp.send;// 确认页面可访问
await page.goto;// ... 后续操作
}
main.catch;

. 模拟使用者操作，强制 GC。采集堆内存基线

The following encapsulates typical business flows . After each operation we trigger garbage collection via CDP and read precise heap size.

// 封装：执行 GC 并返回当前 JS heap 大小
async function getHeapSize {
const cdp = await page.context.newCDPSession;await cdp.send;// 从 performance.memory 获取
const memoryInfo = await page.evaluate => ({
usedJSHeapSize: performance.memory?.usedJSHeapSize || 0,totalJSHeapSize: performance.memory?.totalJSHeapSize || 0
}));return memoryInfo.usedJSHeapSize;
}
// 操作模拟：例如连续打开关闭10次侧边栏
async function simulateUserWorkflow {
for {
await page.click;await page.waitForTimeout;await page.click;await page.waitForTimeout;}
}
// 基线前先预热
await simulateUserWorkflow;const baseHeap = await getHeapSize;console.log).toFixed} MB`);

. 操作后 采集，对比差异并制定通过标准

A second round of same workflow is executed,n final heap size is captured. Because GC isn’t perfectly deterministic。we adopt a simple threshold‑based rule while allowing minor fluctuations.

// 再走一遍负载
await simulateUserWorkflow;const finalHeap = await getHeapSize;console.log).toFixed} MB`);话说回来，const growthMB = /;按理说，const thresholdMB = 10;// 增长超过10MB视为泄漏
if {
console.error} MB`);process.exit;// CI 红线
} else {
console.log} MB`);}
await browser.close;

注意：

• A pure JS‑heap‑size check may miss Detached DOM leaks. For full coverage you’d compare two full Heap Snapshots and analyse node types such as "Detached HTMLDivElement". That requires parsing V8’s *.heapsnapshot* files – code volume grows significantly.
• The snippet above already blocks majority of obvious leaks in CI;remaining edge‑cases can be handled by a periodic “full snapshot” job.

至于踩坑记录，官方文档没告诉你的三个暗坑

Pitfall 1 — performance.memory 在 CI 中返回空值：

• 现象： 本地 macOS Chrome 能拿到数据。却在 Linux 容器里全是 null/undefined.
• 原因： --enable-precise-memory-info
• 解决： 启动参数加上该 flag；按理说，page.goto 后再延迟约 500 ms 确保 frame 完全激活。

Pitfall 2 — GC 后堆大小反而升高：

• 现象： 调用 'HeapProfiler.collectGarbage' 后读数上涨 5 MB，被误报为泄漏。
• Cause: V8 在某些触发时机会执行增量标记并产生临时结构；Playwright 本身也会消耗额外内存。凌晨三点，手机又震了——「页面白屏。JS heap 超过 2GB 已经自动重启三次」。其实，线上前端 OOM 永远在使用者量最大的时候精准暴雷。一边重启 Pod 续命，一边打开 Chrome DevTools 的 Memory 面板进行 Record Allocation、对比 Snapshot、筛 Detached DOM、找 Retaining Path…，整套流程下来如果天亮之前修好只能算运气好。问题根因往往是某个组件卸载时没清理定时器、闭包持有了大对象或事件监听打满引用链——一句话。就是典型的内存泄漏. 每次发版都可能带入新泄漏，而每次验证都要靠人肉点开 dozens of pages,手工操作,半天盯快照。这事不能再这么干下去了，

  Spa 项目里最常见的泄漏来源包括全局事件未解绑、未停、闭包里持有 DOM 节点还有 WebSocket 重连导致无限分身。这类泄漏在普通 QA 功能测试中基本不可见。因为只要不持续长时间交互，就不会触发 GC 临界点。只有真实使用者长时间停留并疯狂交互时才会把 JS heap 推过容器上限，从而被 OOM Killer 教训。

  # 常规方案对比#：

  • 发版前手动使用 Chrome DevTools 跑一遍主要链路？- 覆盖范围有限。需要人工耐力，没有人愿意每天花数分钟点击页面；
  • 加 -‑max-old-space-size - 治标不治本，只是延迟死亡；
  • Lighthouse / PageSpeed?- 专注性能与常用方法，不关注堆內存是否逐渐涨潮；

  #结论# ：必须拥有能够模拟真实使用者交互、自动采集堆內存变化也可以接入 CI 流水线的检测方案。让每一次 PR 都跑一次检查，以判定是否引入新泄漏。

  #候选工具评估# :

  1. Puppeteer + 手写 CDP - 能力够，但相比 Playwright 浏览器支持更少且 API 较原始；
  2. Cypress - 测试框架优秀。但底层仍依赖 CDP，对多页/多上下文的內存快照控制不足；插件环境离內存分析较远，
  3. 直接使用 Node.js 调 Chrome DevTools Protocol - 自由度高。却需自行管理浏览器启动/关闭等生命周期，引入大量脚手架代码。

  #最终选型# ：选择Playwright  因为它自带跨浏览器调度，并提供 page.context.newCDPSession 可以像手术刀一样直接与 V8 Heap Profiler 对话。而其它方案要么功能冗余，要么实现成本更高。话说回来，

  架构思路非常简洁：

  • 使用 Playwright 启动目标页面;
  • 触发关键业务流程;
  • 强制 GC;
  >>

  以下代码完成Playwright启动与CDP连接，同时设置关键参数:

  &amp，

  15

  24

  09

  06

  18

  01

  		A6	2015年12月19日08	No Data!No Data，不过，