了解 Chrome DevTools Performance.getMetrics() 结果

Question

我正在使用 puppeteer 的 page.metrics() 它调用 DevTools 协议Performance.getMetrics() 这里是返回数据的示例：

{
   Timestamp: 672.244221,
   Documents: 3,
   Frames: 2,
   JSEventListeners: 2,
   Nodes: 4116,
   LayoutCount: 3,
   RecalcStyleCount: 2,
   LayoutDuration: 0.136179,
   RecalcStyleDuration: 0.027681,
   ScriptDuration: 0.188817,
   TaskDuration: 0.563811,
   JSHeapUsedSize: 2959520,
   JSHeapTotalSize: 5132288
}

我能找到的关于这些数字的唯一文档是在puppeteer 的文档中 ，基本上是这样的：

• 时间戳 获取指标样本时的时间戳。
• 文档 页面中的文档数。
• Frames 页面中的帧数。
• JSEventListeners 页面中的事件数。
• Nodes 页面中 DOM 节点的数量。
• LayoutCount 完整或部分页面布局的总数。
• RecalcStyleCount 页面样式重新计算的总数。
• LayoutDuration 所有页面布局的组合持续时间。
• RecalcStyleDuration 所有页面样式重新计算的组合持续时间。
• ScriptDuration JavaScript 执行的组合持续时间。
• TaskDuration 浏览器执行的所有任务的总持续时间。
• JSHeapUsedSize 使用的 JavaScript 堆大小。
• JSHeapTotalSize 总 JavaScript 堆大小。

我真的很想获得有关这些数字的更多详细信息，特别是回答以下问题：

1. TaskDuration 明显大于 ScriptDuration、LayoutDuration 和 RecalculateStyleDuration 的总和

   • 剩下的时间都浪费在哪儿了？
   • 我还可以采取哪些其他测量来解释丢失的时间？

2. 什么是文档和框架？

Answer 1

作为第一个问题的答案，Chrome 还会计算系统时间和空闲时间（在 Devtools 的性能选项卡上可见），并且还会计算总时间。

我不太确定系统和空闲时间的测量值，但我在下面的屏幕截图中看到了它：

chrome devtools 性能选项卡截图