news 2026/5/29 12:04:58

性能指标笔记

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
性能指标笔记

网络指标 TTFB

Time to First Byte

衡量请求资源到响应第一个字节开始到达之间的时间，结合 网络 面吧的资源请求耗时，可以判断主要延迟在哪一层。

关于 Network 网络面板：

  • Queued at：表示请求何时入队，如果是 HTTP/1.1 ，请求可能因为并发限制卡顿。

  • Started at：代表开启页面后的，浏览器真正开始处理连接的时间段。

  • Resource Scheduling：资源调度阶段（DNS 解析(可选) > TCP 连接建立准备工作 > 等待可用连接池，HTTP/1.1 需要有并发限制请求，需要等待 ）

    • Queueing：表示进入请求池排队等待的耗时，如果这里耗时过高，可能是
      • DNS 解析较慢
      • 同域请求数过多
      • HTTP/1.1 并发限制引起的队头阻塞

  • Connection Start：连接开始阶段

    • Stalled：阻塞和等待 TCP 建立的时间，有时候和 Queueing 阶段合并

  • Request/Reponse：请求响应阶段

    • Request sent：请求发送耗时，通过这个可以判断，出现问题是否为本地网络层的异常，或者发送的请求体是否过大，精简请求数据
    • Waiting for server【TTFB】：等待服务器响应，通常如果这里耗时过长，可能需要运维或后端去协助排查服务问题，一般问题集中在：
      • 代理层或者网关问题
      • kafka / MQ 队列消费是否堆积
      • 入库和查询是否有性能问题
      • 服务端业务处理逻辑，是否有同步任务阻塞问题。
    • Content Download：这块通常是指请求响应下载耗时，如果这块耗时过高，需要检查用户网络是否存在问题，或者优化我们的响应数据内容（gzip，精简请求体内容）

如何优化 Queuening 和 Stalled 阶段：

  • dns prefetch 预解析 DNS
  • 使用 HTTP/2，避免 HTTP/1.1 队头阻塞问题
  • preload 预加载重要资源
  • 减少请求数量，避免请求池被阻塞

TTFB 等待优化

  • 缓存
  • CDN
  • 负载均衡
  • 数据库索引加速查找

Content Download 优化：

  • gzip 资源压缩
  • 分块传输
  • 减少响应体大小

TTFB 代表 startTime 到 responseStart 之间的时间

  1. 重定向时间 Redirect
  2. Service Worker 启动，拦截事件时间
  3. HTTP Cache 缓存读取
  4. DNS 重定向时间
  5. TCP 连接和 TLS 建立时间
  6. Request 开始发送请求，直到 Reponse 第一个请求响应到达
指标良好一般较差
TTFB≤ 800 ms801–1800 ms> 1800 ms

LCP

Largest Content Paint

最大内容绘制，通常是首屏中最大的文本或图片元素完成渲染的时间。

指标良好一般较差
LCP≤ 2.5 s2.5–4.0 s≥ 4.0 s

TTI

Time to Interactive

首次可交互时间，该指标占比已经不高

  • 从 FCP 之后开始计算
  • 静默窗口：5s 内无长任务阻塞，且没有 2 个以上正在运行的 get 请求
  • 在静默窗口之前，最后一个长任务执行位置，即为 TTI 时间
  • 若没有长任务，则 FCP 为 TTI 开始时间
指标良好一般较差
TTI≤ 3.8 s3.8–7.3 s≥ 7.3 s

FCP

First Content Paint

首次内容绘制时间，即从用户首次导航到网页到网页任何一部分内容呈现在屏幕上的时间

内容 指：

  • 文本
  • 图片、背景图片
  • <svg>元素 和 非白色<canvans>元素
指标良好一般较差
FCP≤ 1.8 s1.8–3.0 s≥ 3.0 s

INP

Interaction to Next Paint

下次绘制响应

测量单击、键盘和交互的整体响应能力

超过 500ms ，会导致明显的卡顿感知，可以通过缓存来优化

指标良好一般较差
INP≤ 200 ms200–500 ms≥ 500 ms

CLS

Cumulative Layout Shift
累计偏移量
**计算公式：**位移影响的面积 * 位移距离。

指标良好一般较差
CLS≤ 100ms100ms–250ms≥ 250ms

FID

First Input Delay

首次输入延迟
在 FCP 和 TTI 之间用户与页面交互的响应延迟
目前已逐步被 INP 取代

指标良好一般较差
FID≤ 100 ms100–300 ms≥ 300 ms

TBT

Total Blocking Time
阻塞总时间
记录 TTI 和 FCP 之间的阻塞时间之和

指标良好一般较差
TBT≤ 200 ms200–600 ms≥ 600 ms

FMP

First Meaningful Paint

首次有意义渲染帧
从页面加载开始到主要内容已经在首屏渲染的时间点
非标准化指标

参考内容

  • 加载第一个字节所需时间（TTFB）｜Google Developers（web.dev for China）
    使用许可：CC BY 4.0（含文中示意图）

  • Web Vitals｜Google Developers（web.dev for China）
    使用许可：CC BY 4.0

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/5/9 18:15:19

什么是勒索软件即服务（RaaS）

文章目录勒索软件即服务的影响勒索软件即服务是如何运作的勒索软件即服务典型案例华为如何帮助您抵御勒索软件即服务勒索软件即服务RaaS&#xff08;Ransomware as a Service&#xff09;是一种网络犯罪商用模式&#xff0c;犯罪组织采用软件即服务&#xff08;SaaS&#xff09…

作者头像 李华
网站建设 2026/5/20 12:54:17

k8s（三）

文章目录前言一、k8s基本命令1.1 查看命令1.2 创建命令1.3 删除命令1.4 发布命令1.5 更新命令1.6 回滚命令二、发布策略2.1 重建发布2.2 滚动更新2.3 蓝绿发布2.4 金丝雀发布2.5 灰度发布三、资源配置清单3.1 查看资源配置清单3.2 编写资源配置清单总结前言 一、k8s基本命令 …

作者头像 李华
网站建设 2026/5/9 23:25:32

MySQL 启动失败 (code=exited, status=1FAILURE) 异常解决方案

目录 前言1. 问题描述2. 查看错误日志文件 2.1 确认日志文件路径2.2 查看日志文件内容 3. 定位问题 3.1 问题分析 4. 解决问题 4.1 注释掉错误配置4.2 重启 MySQL 服务 5. 总结结语 前言 在日常运维和开发过程中&#xff0c;MySQL数据库的稳定运行至关重要。然而&#xff0c…

作者头像 李华
网站建设 2026/5/20 14:18:10

市场营销的5个真相：从B2B到品牌的深刻教训

目录 情感胜于逻辑——即使在“理性”的B2B世界 你的受众是完整的人——活跃在所有平台 “善意”毫无意义——如果没有多元化的视角 抛弃僵硬的术语——清晰和人性化才能建立信任 品牌是你的护城河——而不仅仅是一个标志 Conclusion: Your Next Move 尽管我们投入了巨额…

作者头像 李华
网站建设 2026/5/29 17:34:43

MySQL 事务的操作和四大特性

??所属专栏&#xff1a;MySQL**** ??1. 事务 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;这些操作要么同时成功&#xff0c;要么同时失败 例如转账的过程&#xff1…

作者头像 李华
网站建设 2026/5/11 13:39:10

MySQL 与 Redis 的数据一致性问题

读数据的逻辑基本一致问题1: 一致性有哪些?MySQL 与 Redis 的数据一致性方案有哪些? 先写MySQL还是先写Redis?缓存数据是更新还是清除?强一致还是最终一致? 问题: 如果mysql写成功了,但是Redis写(删除)失败了怎么办?重试机制的幂等问题如何解决? 方案1: 先更新 MySQL 再…

作者头像 李华