是否可以从 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
}

如果我在这里咆哮错误的树或者我可以 extract/calculate 性能指标仅使用 traceEvents 数据，我会很高兴知道。我假设这应该是可能的，因为转储包含页面加载期间发生的所有事件，并且开发工具似乎也将它们放在时间轴上。

非常感谢。

Answer 1

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

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

应记录正确的跟踪类别。参考categories used by DevTools.
渲染 ID 和框架 ID 应用于消除顶级框架和任何 iframe 之间的记录歧义。您可以从 TracingStartedInBrowser 事件中获取这些 ID。

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

Is it possible to derive Web Vitals from chrome trace events data?

google-chrome

node.js

google-chrome-devtools

puppeteer

core-web-vitals