了解Chrome DevTools Performance.getMetrics（）结果

Question

我正在使用操纵up的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's documentation中 基本上就是这样：

  

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

我真的想获得有关这些数字的更多详细信息，并专门回答以下问题：

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

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

2. 什么是文档和框架？

Answer 1

第一个问题的答案，Chrome还会计算系统时间和空闲时间（在Devtools的“性能”标签上可见），并且还会计算总时间。

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

chrome devtools performance tab screenshot