当前位置: 首页 > news >正文

【性能】如何计算 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

相关文章:

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

什么是 TTI 指标 TTI&#xff08;Time To Interactive&#xff09;&#xff0c;即从页面加载开始到页面处于完全可交互状态所花费的时间。页面处于完全可交互状态时&#xff0c;满足以下 3 个条件&#xff1a; 页面已经显示有用内容。页面上的可见元素关联的事件响应函数已经…...

大模型交互-超拟人合成

1、超拟人合成&#xff1a;将文字转化为自然流畅的人声&#xff0c;在实时语音合成的基础上&#xff0c;精准模拟人类的副语言现象&#xff0c;如呼吸、叹气、语速变化等&#xff0c;使得语音不仅流畅自然&#xff0c;更富有情感和生命力。 2、唤醒的持久运行--->合成能力加…...

第十四届蓝桥杯蜗牛

蜗牛 线性dp 目录 蜗牛 线性dp 先求到达竹竿底部的状态转移方程 求蜗牛到达第i根竹竿的传送门入口的最短时间​编辑 题目链接&#xff1a;蓝桥杯2023年第十四届省赛真题-蜗牛 - C语言网 关键在于建立数组将竹竿上的每个状态量表示出来&#xff0c;并分析出状态转移方程 in…...

分布式定时任务调度xxl-job

1. xxl-job基本介绍 1.1 Quartz的体系结构 Quartz中最重要的三个对象:Job&#xff08;作业&#xff09;、Trigger&#xff08;触发器&#xff09;、Scheduler&#xff08;调度器&#xff09;。 xxl-job的调度原理:调度线程在一个while循环中不断地获取一定数量的即将触发的Tr…...

自动化运维利器Ansible基础(环境部署)

Ansible 介绍及安装 1. 介绍 Ansible 是⼀个 IT ⾃动化⼯具。它能配置系统、部署软件、编 排更复杂的 IT 任务&#xff0c;如连续部署或零停机时间滚动更新。 Ansible ⽤ Python 编写&#xff0c;尽管市⾯上已经有很多可供选择的 配置管理解决⽅案&#xff08;例如 Salt、Pupp…...

微服务自动化管理初步认识与使用

目录 一、ETCD 1.1、ETCD简介 对于实施工程师&#xff1a; 1.2、特点 1.3. 使用场景 1.4、 关键字 1.5 工作原理 二、ETCD的安装 2.1、下载路径 2.2、介绍 2.3、具体操作 安装服务端 安装etcd客户端 测试 三、ETCD使用 3.1、前奏具体操作 3.2、 常用操作 一、ET…...

使用Docker管理linux容器

文章目录 一、使用docker管理镜像 二、使用docker管理容器 一、使用docker管理镜像 1、安装操作系统&#xff0c;我安装的是centOS 7 &#xff0c;因为centos7有着非常丰富的软件仓库&#xff0c;方便后续安装与docker相关的软件。 2、初始化设置&#xff0c; 关闭防火墙 关闭…...

CTR之行为序列建模用户兴趣:DIEN

前言 在上一篇文章中 CTR之行为序列建模用户兴趣&#xff1a;DIN&#xff0c;开启了用户行为序列建模用户兴趣的篇章。DIN引入了Attention机制&#xff0c;对于不同的候选item&#xff0c;可以根据用户的历史行为序列&#xff0c;动态地学习用户的兴趣表征向量。但是&#xff…...

1960-2020年全球双边迁移数据库(Global Bilateral MigrationDatabase)

1960-2020年全球双边迁移数据库&#xff08;Global Bilateral MigrationDatabase&#xff09; 1、时间&#xff1a;1960-2000年&#xff0c;每10年一次具体为&#xff1a;1960年、1970年、1980年、1990年、2000年 2、来源&#xff1a;世界银行 3、指标&#xff1a;Country O…...

OpenGL-贴纸方案

OpenGL-贴纸方案 普通贴纸&#xff08;缩放、Z轴旋转、平移&#xff09; OpenGL环境说明 OpenGL渲染区域使用正交投影换算,正常OpenGL坐标是vertexData,这样的 Matrix.orthoM 进行换算 //顶点坐标&#xff08;原点为显示区域中心店&#xff09;private final float[] vertex…...

【性能测试】移动测试md知识总结第1篇:移动端测试课程介绍【附代码文档】

移动测试完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;移动端测试课程介绍&#xff0c;移动端测试知识概览&#xff0c;移动端测试环境搭建&#xff0c;ADB常用命令学习主要内容,学习目标,学习目标,1. window安装andorid模拟器,学习目标。主流移动端自动…...

Vue2和vue3的区别(前端面试常见问题)

1.Api的变化&#xff1a;vue3使用组合式Api&#xff08;compostion Api&#xff09;和Vue2是选项式Api&#xff08;options Api&#xff09;。选项式Api具有data &#xff0c;watch&#xff0c;methods&#xff0c;computed&#xff0c;一个个的模块。如果代码过多可读性会很差…...

openGauss学习笔记-241 openGauss性能调优-SQL调优-审视和修改表定义

文章目录 openGauss学习笔记-241 openGauss性能调优-SQL调优-审视和修改表定义241.1 审视和修改表定义概述241.2 选择存储模型241.3 使用局部聚簇241.4 使用分区表241.5 选择数据类型 openGauss学习笔记-241 openGauss性能调优-SQL调优-审视和修改表定义 241.1 审视和修改表定…...

PDFPlumber解析PDF文本报错:AssertionError: (‘Unhandled’, 6)

文章目录 1、问题描述2、问题原因3、问题解决 1、问题描述 今天在使用PDFPlumber模块提取PDF文本时extract_text()方法报错&#xff0c;报错内容如下&#xff1a; Traceback (most recent call last):......File "F:\Python\...\site-packages\pdfminer\pdffont.py"…...

51WORLD正式落地中东,助力沙特伙伴与客户数字化升级!

近日&#xff0c;在被誉为中东“数字达沃斯”的LEAP科技展上&#xff0c;51WORLD首次震撼亮相Digital Twin Riyadh2924k㎡ 全要素城市底座、数字地球平台51Earth&#xff0c;向中东及全球科技从业者展现中国企业技术实力与创新能力。此外&#xff0c;以LEAP为起点&#xff0c;5…...

嵌入式学习38-数据库

数据库软件: 关系型数据库: Mysql &#xff08;开源&#xff09; Oracle SqlServer Sqlite &#xff08;小型数据&#xff09; 非关系型数据库&#xff1a;&#xff08;快速查找数据&#xff09; Redis NoSQ…...

去除PDF论文行号的完美解决方案

去除PDF论文行号的完美解决方案 1. 遇到的问题 我想去除论文的行号&#xff0c;但是使用网上的Adobe Acrobat裁剪保存后 如何去掉pdf的行编号&#xff1f; - 知乎 (zhihu.com) 翻译时依然会出现行号&#xff0c;或者是转成word&#xff0c;这样就大大损失了格式&#xff0c;…...

《ElementPlus 与 ElementUI 差异集合》icon 图标使用(包含:el-button,el-input和el-dropdown 差异对比)

安装 注意 ElementPlus 的 Icon 图标 要额外安装插件 element-plus/icons-vue. npm install element-plus/icons-vue注册 全局注册 定义一个文件 element-icon.js &#xff0c;注意代码第 6 行。加上了前缀 ElIcon &#xff0c;避免组件命名重复&#xff0c;且易于理解为 e…...

力扣题库第8题:去重后的最长子串

题目&#xff1a; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。 示例 2: 输入: s "bbbbb" …...

CSS样式中长度单位含义解析:rpx、px、vw、vh、em、rem、pt

在 CSS 样式中&#xff0c;有几种常见的长度单位&#xff0c;包括 rpx 、 px 、 vw 和 vh 等&#xff0c;含义解析如下&#xff1a; 1 . rpx &#xff08;响应像素&#xff09;&#xff1a; 是微信小程序中的一种相对长度单位&#xff0c;可以根据屏幕宽度进行自适应缩放。 1rp…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...