【性能】如何计算 Web 页面的 TTI 指标

什么是 TTI 指标

TTI（Time To Interactive），即从页面加载开始到页面处于完全可交互状态所花费的时间。页面处于完全可交互状态时，满足以下 3 个条件：

• 页面已经显示有用内容。
• 页面上的可见元素关联的事件响应函数已经完成注册。
• 事件响应函数可以在事件发生后的 50ms 内开始执行。

很多情况下，开发者往往只关注页面渲染相关的指标，如 FP、FCP 等，而忽视了页面的可用性指标。TTI 即是反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。

如何获取 TTI 指标

用户访问 Web 页面，通常会有两种模式:

• 直接通过服务端路由切换的同步跳转场景；
• 通过客户端路由跳转的 SPA 页面切换场景；

同步跳转场景

Long Task 定义：在浏览器主线程执行时间超过 50ms 的 Task。
静默窗口期定义：窗口所对应的时间内没有 Long Task，且进行中的网络请求数不超过 2 个。

算法描述：

• 从起始点（一般选择 FCP 或 FMP）时间开始，向前搜索一个不小于 5s 的静默窗口期。静默窗口期定义：窗口所对应的时间内没有 Long Task，且进行中的网络请求数不超过 2 个。
• 找到静默窗口期后，从静默窗口期向后搜索到最近的一个 Long Task，Long Task 的结束时间即为 TTI。
• 如果没有找到 Long Task，以起始点时间作为 TTI。
• 如果 2、3 步骤得到的 TTI < DOMContentLoadedEventEnd，以 DOMContentLoadedEventEnd 作为TTI。

SPA 路由切换场景

算法描述：

• 从起始点开始（一般选择「客户端路由开始」的时间），向前搜索一个不小于 5s 的静默窗口期。
• 找到静默窗口期后，从静默窗口期向后搜索到最近的一个 Long Task，Long Task 的结束时间即为 TTI。
• 如果没有找到 Long Task，以起始点时间作为 TTI。

浏览器兼容性说明

• TTI 指标要求浏览器支持 Long Tasks API 和 Resource Timing API，在浏览器不兼容的情况下，不上报 TTI 指标（不会对数据统计造成影响）。

如何优化 TTI 指标

优化 TTI 指标，关键是缩短页面加载过程中，JS 代码的执行时间。常见的优化方法有：

• 合理进行代码分片。
• 精简 JS 逻辑，移除无用代码。
• 合理缓存 JS 文件。

参考资料
https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c