了解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 的文档 中，其基本内容如下:

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

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

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

   • 其余的时间浪费在哪里？
   • 我可以采取哪些其他措施来考虑那些缺失的时间？

2. 文档和帧是什么？

- MichaelB

---

注意 - 之前已经有类似的问题被问过： https://dev59.com/qKjka4cB1Zd3GeqPEc4z但是答案只引用了Puppeteer中相同的文档。 - MichaelB

Answer 1

关于你的第一个问题，Chrome还计算系统时间和空闲时间（在Devtools的性能选项卡中可见），同时也有总时间的计算。

我不确定系统和空闲时间的测量方式，但是我在下面的截图中看到了它：

chrome devtools performance tab screenshot

- Sanket Mehrotra