网站开发 岗位及职责,枣阳做网站,网页设计与制作期末考试试题及答案,qq轻聊版下载什么是 TTI 指标
TTI#xff08;Time To Interactive#xff09;#xff0c;即从页面加载开始到页面处于完全可交互状态所花费的时间。页面处于完全可交互状态时#xff0c;满足以下 3 个条件#xff1a;
页面已经显示有用内容。页面上的可见元素关联的事件响应函数已经…什么是 TTI 指标
TTITime 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 TaskLong Task 的结束时间即为 TTI。如果没有找到 Long Task以起始点时间作为 TTI。如果 2、3 步骤得到的 TTI DOMContentLoadedEventEnd以 DOMContentLoadedEventEnd 作为TTI。
SPA 路由切换场景
算法描述
从起始点开始一般选择「客户端路由开始」的时间向前搜索一个不小于 5s 的静默窗口期。找到静默窗口期后从静默窗口期向后搜索到最近的一个 Long TaskLong 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
