【性能】如何计算 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(Time To Interactive),即从页面加载开始到页面处于完全可交互状态所花费的时间。页面处于完全可交互状态时,满足以下 3 个条件: 页面已经显示有用内容。页面上的可见元素关联的事件响应函数已经…...
大模型交互-超拟人合成
1、超拟人合成:将文字转化为自然流畅的人声,在实时语音合成的基础上,精准模拟人类的副语言现象,如呼吸、叹气、语速变化等,使得语音不仅流畅自然,更富有情感和生命力。 2、唤醒的持久运行--->合成能力加…...
第十四届蓝桥杯蜗牛
蜗牛 线性dp 目录 蜗牛 线性dp 先求到达竹竿底部的状态转移方程 求蜗牛到达第i根竹竿的传送门入口的最短时间编辑 题目链接:蓝桥杯2023年第十四届省赛真题-蜗牛 - C语言网 关键在于建立数组将竹竿上的每个状态量表示出来,并分析出状态转移方程 in…...
分布式定时任务调度xxl-job
1. xxl-job基本介绍 1.1 Quartz的体系结构 Quartz中最重要的三个对象:Job(作业)、Trigger(触发器)、Scheduler(调度器)。 xxl-job的调度原理:调度线程在一个while循环中不断地获取一定数量的即将触发的Tr…...
自动化运维利器Ansible基础(环境部署)
Ansible 介绍及安装 1. 介绍 Ansible 是⼀个 IT ⾃动化⼯具。它能配置系统、部署软件、编 排更复杂的 IT 任务,如连续部署或零停机时间滚动更新。 Ansible ⽤ Python 编写,尽管市⾯上已经有很多可供选择的 配置管理解决⽅案(例如 Salt、Pupp…...
微服务自动化管理初步认识与使用
目录 一、ETCD 1.1、ETCD简介 对于实施工程师: 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、安装操作系统,我安装的是centOS 7 ,因为centos7有着非常丰富的软件仓库,方便后续安装与docker相关的软件。 2、初始化设置, 关闭防火墙 关闭…...
CTR之行为序列建模用户兴趣:DIEN
前言 在上一篇文章中 CTR之行为序列建模用户兴趣:DIN,开启了用户行为序列建模用户兴趣的篇章。DIN引入了Attention机制,对于不同的候选item,可以根据用户的历史行为序列,动态地学习用户的兴趣表征向量。但是ÿ…...
1960-2020年全球双边迁移数据库(Global Bilateral MigrationDatabase)
1960-2020年全球双边迁移数据库(Global Bilateral MigrationDatabase) 1、时间:1960-2000年,每10年一次具体为:1960年、1970年、1980年、1990年、2000年 2、来源:世界银行 3、指标:Country O…...
OpenGL-贴纸方案
OpenGL-贴纸方案 普通贴纸(缩放、Z轴旋转、平移) OpenGL环境说明 OpenGL渲染区域使用正交投影换算,正常OpenGL坐标是vertexData,这样的 Matrix.orthoM 进行换算 //顶点坐标(原点为显示区域中心店)private final float[] vertex…...
【性能测试】移动测试md知识总结第1篇:移动端测试课程介绍【附代码文档】
移动测试完整教程(附代码资料)主要内容讲述:移动端测试课程介绍,移动端测试知识概览,移动端测试环境搭建,ADB常用命令学习主要内容,学习目标,学习目标,1. window安装andorid模拟器,学习目标。主流移动端自动…...
Vue2和vue3的区别(前端面试常见问题)
1.Api的变化:vue3使用组合式Api(compostion Api)和Vue2是选项式Api(options Api)。选项式Api具有data ,watch,methods,computed,一个个的模块。如果代码过多可读性会很差…...
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()方法报错,报错内容如下: Traceback (most recent call last):......File "F:\Python\...\site-packages\pdfminer\pdffont.py"…...
51WORLD正式落地中东,助力沙特伙伴与客户数字化升级!
近日,在被誉为中东“数字达沃斯”的LEAP科技展上,51WORLD首次震撼亮相Digital Twin Riyadh2924k㎡ 全要素城市底座、数字地球平台51Earth,向中东及全球科技从业者展现中国企业技术实力与创新能力。此外,以LEAP为起点,5…...
嵌入式学习38-数据库
数据库软件: 关系型数据库: Mysql (开源) Oracle SqlServer Sqlite (小型数据) 非关系型数据库:(快速查找数据) Redis NoSQ…...
去除PDF论文行号的完美解决方案
去除PDF论文行号的完美解决方案 1. 遇到的问题 我想去除论文的行号,但是使用网上的Adobe Acrobat裁剪保存后 如何去掉pdf的行编号? - 知乎 (zhihu.com) 翻译时依然会出现行号,或者是转成word,这样就大大损失了格式,…...
《ElementPlus 与 ElementUI 差异集合》icon 图标使用(包含:el-button,el-input和el-dropdown 差异对比)
安装 注意 ElementPlus 的 Icon 图标 要额外安装插件 element-plus/icons-vue. npm install element-plus/icons-vue注册 全局注册 定义一个文件 element-icon.js ,注意代码第 6 行。加上了前缀 ElIcon ,避免组件命名重复,且易于理解为 e…...
力扣题库第8题:去重后的最长子串
题目: 给定一个字符串 s ,请你找出其中不含有重复字符的 最长 子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc",所以其长度为 3。 示例 2: 输入: s "bbbbb" …...
CSS样式中长度单位含义解析:rpx、px、vw、vh、em、rem、pt
在 CSS 样式中,有几种常见的长度单位,包括 rpx 、 px 、 vw 和 vh 等,含义解析如下: 1 . rpx (响应像素): 是微信小程序中的一种相对长度单位,可以根据屏幕宽度进行自适应缩放。 1rp…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
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(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
