什么是 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