【性能】如何计算 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…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
