用 Chrome DevTools Protocol 做页面性能回归检测

为什么不用 Lighthouse

Lighthouse 很好用，但它的评分受网络和机器负载影响大，同一份代码跑两次能差 10 分，做 CI 卡点容易误报。我们真正在意的其实只有几个确定性指标：首屏 JS 执行时长、主线程长任务数量、DOM 节点数、内存峰值。这些东西用 CDP 直接读，波动小得多。

环境准备

pip install playwright

不需要额外装浏览器，用系统里的 Chromium 就行。

采集脚本

from playwright.sync_api import sync_playwright

URL = "http://localhost:3000"
with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    cdp = page.context.new_cdp_session(page)

    cdp.send("Performance.enable")
    cdp.send("Profiler.enable")
    cdp.send("Profiler.start")

    page.goto(URL, wait_until="load")
    page.wait_for_timeout(3000)

    metrics = {m["name"]: m["value"] for m in cdp.send("Performance.getMetrics")["metrics"]}
    profile = cdp.send("Profiler.stop")["profile"]

    print("JS 堆大小 MB:", round(metrics["JSHeapUsedSize"] / 1048576, 1))
    print("DOM 节点数:", metrics["Nodes"])
    print("布局次数:", metrics["LayoutCount"])
    print("样式重算:", metrics["RecalcStyleCount"])

    # 统计超过 50ms 的长任务
    long_tasks = [n for n in profile["nodes"] if n.get("hitCount", 0) > 0]
    print("热点函数数:", len(long_tasks))
    browser.close()

加入 CI 的思路

把上面几个指标写成阈值断言，比如：

• DOM 节点数 < 3000

• JS 堆 < 60MB

• 布局次数 < 200

超过就 fail。阈值不要一次定死，先跑两周收集基线，取 P95 再加 20% 余量。

踩过的坑

**坑一：headless 模式下字体渲染不同**，导致布局次数偏高。解决办法是统一用 `--font-render-hinting=none` 启动参数。

**坑二：`wait_until="load"` 之后还有异步请求**，指标会偏低。加一个显式的 `wait_for_timeout(3000)` 或者等某个关键元素出现。

**坑三：Profiler 采样有开销**，开太久会让页面变慢，影响指标本身。控制在 5 秒以内。

小结

性能回归检测的关键不是测得有多全，而是测得有多稳。少而确定的几个指标，配上合理的阈值，就能拦住绝大多数性能退化。