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

Question

Chrome 的 Lighthouse 工具和 WebPageTest 提供 "time-to-interactive" (TTI) 指标。

Google 报价 a minimal definition of TTI:

Time to Interactive is defined as the point at which layout has stabilized, key webfonts are visible, and the main thread is available enough to handle user input.

Note that this metric is in early phases and is subject to change.

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

Time to Consistently Interactive Calculation

• Start looking for TTI at the larger of first contentful paint or DOM Content Loaded
• Look for the first interactive window where there is a contiguous period of 5 seconds fully contained within the interactive window with no more than 2 in-flight requests
• TTI is the start of the interactive window from step 2 or the search starting point, whichever is later Time to

First Interactive Calculation

• Start looking for TTI at the larger of first contentful paint or DOM Content Loaded
• Look for the first interactive window where there is a contiguous period of 5 seconds fully contained within the interactive window regardless of the number of in-flight requests
• TTI is the start of the interactive window from step 2 or the search starting point, whichever is later

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

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

更新：

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

Answer 1

GoogleChromeLabs 提供 polyfill for the TTI metric。

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

Note: this snippet is a temporary workaround, until browsers implement level 2 of the Performance Observer spec and include the buffered flag.