当前位置: 首页 > 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…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...