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

Question

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

谷歌提供a minimal definition of TTI：

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

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

网页测试breaks them into "time to first interactive" and "time to consistently interactive":

持续交互计算的时间

• 从第一个内容绘制或加载的 DOM 内容中的较大者开始寻找 TTI
• 查找第一个交互式窗口，其中有 5 秒的连续时间段完全包含在交互式窗口中，没有更多 超过 2 个进行中的请求
• TTI 是从第 2 步开始的交互式窗口或搜索起点，以较晚的时间为准

第一次交互式计算

• 从第一个内容绘制或加载的 DOM 内容中的较大者开始寻找 TTI
• 查找第一个交互式窗口，其中有 5 秒的连续时间段完全包含在交互式窗口中，无论进行中的请求数量如何
• TTI 是从第 2 步开始的交互式窗口的起点或搜索起点，以较晚者为准

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

当前的 JavaScript API 是否可以进行这样的计算？如果有，怎么做？

更新：

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

Answer 1

GoogleChromeLabs 提供polyfill for the TTI metric。

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

注意：此 sn-p 是一种临时解决方法，直到浏览器实现性能观察者规范的第 2 级并包含 buffered 标志。