如何通过Chrome DevTools协议获取页面渲染与绘制时间？

核心结论 #

CDP没有直接返回Summary区域这些聚合指标的API，但可以通过录制Performance Trace并解析Trace数据计算出对应数值，结果和DevTools展示的完全一致。

具体实现步骤 #

1. 开启Performance Trace录制
   通过CDP的Performance.enable接口启动追踪，配置必要的事件类别（至少包含核心的渲染、脚本执行相关类别），示例代码（以Puppeteer为例）：

await page._client.send('Performance.enable', {
  timeDomain: 'timeTicks',
  traceConfig: {
    includedCategories: ['devtools.timeline', 'blink.user_timing', 'v8', 'disabled-by-default-devtools.timeline']
  }
});

2. 停止录制并获取Trace事件
   等待页面加载完成（比如监听load事件）后，调用Performance.getTraceEvents获取所有追踪数据：

await page.waitForLoadState('load');
const traceEvents = await page._client.send('Performance.getTraceEvents');
await page._client.send('Performance.disable');

3. 解析Trace计算对应指标
   Summary里的指标对应以下事件逻辑：

• Loading：从页面启动加载到DOMContentLoaded事件触发的时间差
• Scripting：所有v8.compile、EventDispatch等脚本执行事件的耗时总和
• Rendering：Layout、Paint、CompositeLayers等渲染事件的耗时总和
• Painting：所有Paint事件的耗时总和
• System：浏览器内部处理事件的耗时总和
• Idle：总时长减去上述所有类别的耗时差值

你可以遍历Trace事件按类型累加耗时，也可以用chrome-trace-event这类现成库简化解析工作。

替代方案（精度有限） #

如果不想录制Trace，也可以通过CDP的Runtime.evaluate执行浏览器端的performance.getEntriesByType()获取部分指标，但结果会和DevTools Summary存在偏差——因为缺少浏览器内部的系统耗时等数据。

内容的提问来源于stack exchange，提问作者Shivam Mishra