如何计算交互式客户端的时间？

Question

Chrome的Lighthouse工具和WebPageTest提供“交互时间”（TTI）指标。

Google提供a minimal definition of TTI：

  

交互时间被定义为布局稳定，关键网页字体可见，主线程足以处理用户输入的点。

     

请注意，此指标处于早期阶段，可能会发生变化。

WebPageTest breaks them into "time to first interactive" and "time to consistently interactive"：

  

持续交互式计算的时间

     

  
• 开始在第一个内容绘画或DOM Content Loaded
的较大位置寻找TTI   
• 查找第一个交互式窗口，其中交互式窗口中完全包含连续5秒的周期，不再有   超过2个飞行中的请求
  
• TTI是从步骤2或搜索起点开始的交互式窗口，以较晚者为准
  

     

第一次互动计算

     

  
• 开始在第一个内容绘画或DOM Content Loaded
的较大位置寻找TTI   
• 查找第一个交互式窗口，其中交互式窗口中完全包含5秒的连续时间段，无论正在进行的请求数量是多少
  
• TTI是步骤2或搜索起点的交互式窗口的开头，以较晚者为准
  

我想在客户端计算WebPageTest的两个不同的TTI指标，并将它们发送回API（用于RUM目的）。

使用当前的JavaScript API进行此类计算是否可行？如果是这样，怎么样？

更新

我没有找到令人满意的客户端解决方案，但我找到了更多in-depth definition of TTI。

Answer 1

GoogleChromeLabs提供polyfill for the TTI metric。

浏览器最终将通过内置API公开指标：

  

注意：此代码段是一种临时解决方法，直到浏览器实施Performance Observer规范的第2级并包含buffered标记。