是否可以从 chrome 跟踪事件数据中获取 Web Vitals？

Question

我希望在不与PerformanceObserver api 交互但使用Chrome trace events 的情况下计算核心网络生命体征方面得到一些建议。

由于 puppeteer 操作是大规模完成的，我不希望使用 page.evaluate 与页面交互，而是尽可能根据我使用的数据计算指标：

await page.tracing.start();
await page.goto(url, { waitUntil: "networkidle0" });
writeFile("dump.json", (await page.tracing.stop()).toString()); -> Can I get web vitals/perf metrics here?

我可以在跟踪的输出中看到这样的事件：

{
  "args": {
    "data": {
      "candidateIndex": 1,
      "isMainFrame": true,
      "navigationId": "927C29B0D3BD3783D85D54D161903DEF",
      "nodeId": 92,
      "size": 145574,
      "type": "image"
    },
    "frame": "8DCDB2C2311B3C524C094C8C4555E0FB"
  },
  "cat": "loading,rail,devtools.timeline",
  "name": "largestContentfulPaint::Candidate",
  "ph": "I",
  "pid": 94113,
  "s": "t",
  "tid": 775,
  "ts": 437767356341
}

如果我在这里找错了树，或者我可以仅使用 traceEvents 数据提取/计算性能指标，我会很高兴。我假设这应该是可能的，因为转储包含页面加载期间发生的所有事件，并且 devtools 似乎也将它们放在时间线上。

非常感谢。

Answer 1

Chrome DevTools 协议使用的PerformanceTimeline domain 可能包含您要查找的信息类型，类似于您的屏幕截图。

FCP、LCP 和 CLS 生命体征也记录在跟踪数据中，并可通过 Puppeteer 访问，但有一些注意事项需要考虑：

• 应记录正确的跟踪类别。请参阅categories used by DevTools。
• 渲染和框架 ID 应该用于区分顶级框架和任何 iframe 之间的记录。您可以从 TracingStartedInBrowser 事件中获取这些 ID。