如何进行前端性能测试？–性能标准

前端性能测试指标：

首次加载阶段

• 场景：用户首次访问网页，在页面还未完全呈现各种内容和功能时的体验。
• 重要指标及原因
  • 首次内容绘制（FCP - First Contentful Paint）​
    • 标准：FCP 通常应在 1.8 秒内达成。
    • 重要性：这是用户看到页面第一个内容的时刻，能让用户快速知道页面已经开始加载，减少等待的焦虑感。如果 FCP 时间过长，用户可能会认为页面加载缓慢甚至放弃访问。
  • 最大内容绘制（LCP - Largest Contentful Paint）​
    • 标准：一般来说，LCP 应该在 2.5 秒内完成。
    • 重要性：LCP 衡量视口中最大内容元素何时渲染到屏幕上，对于用户快速感知页面主要内容很关键。较快的 LCP 时间可以让用户更快地了解页面的核心信息。

交互响应阶段

• 场景：用户在页面上进行各种交互操作，如点击按钮、输入文本等。
• 重要指标及原因
  • 首次输入延迟（FID - First Input Delay）​
    • 标准：FID 应控制在 100 毫秒以内。
    • 重要性：直接反映用户操作后页面的响应速度。如果 FID 时间过长，用户点击按钮后要过很久页面才有反应，会极大地影响用户体验，让用户觉得页面卡顿、不流畅。
  • 页面交互时间（TTI - Time to Interactive）​
    • 标准：TTI 应在 5 秒以内。
    • 重要性：表示页面达到可稳定交互状态的时间。如果 TTI 时间过长，用户在一段时间内无法正常与页面交互，可能会放弃操作或离开页面。
      页面加载完整性阶段
• 场景：用户等待整个页面包括所有资源（图片、脚本、样式表等）完全加载### 完成的体验。
• 重要指标及原因
  • 页面完全加载时间（Time to Fully Loaded）​
    • 标准：一般希望TFL在 3 秒内完成，复杂 Web 应用通常不应超过 5 秒。
    • 重要性：对于一些需要完整资源才能正常使用的页面功能，如视频播放、大型文件上传下载等，页面完全加载时间过长会导致用户无法及时使用这些功能，可能造成用户流失。

视觉稳定性场景

• 场景：用户在浏览页面过程中，希望页面布局保持稳定，不会突然发生意外变化。
• 重要指标及原因
  • 累积布局偏移（CLS - Cumulative Layout Shift）​
    • 标准：CLS 通常应保持在 0.1 以下。
    • 重要性：如果页面在加载或交互过程中频繁出现布局偏移，会让用户感到困惑和不适，可能导致误操作，严重影响用户体验。

整体加载速度感知场景

• 场景：用户对页面整体加载快慢的主观感受，尤其是在网络环境较差或页面较为复杂时。
• 重要指标及原因
  • 速度指数（Speed Index，SI）​
    • 标准：SL通常认为速度指数在 3 秒以内是比较理想的。
    • 重要性：从整体上衡量页面加载期间内容可视化显示的速度，能让开发者了解用户对页面加载速度的大致感受，以便进行针对性的优化 。

线上网站测试工具：

• WebPageTest：这是一个专业的网页性能测试工具，它提供了一系列详细的性能评分和建议。一般来说，在 WebPageTest 的综合评分中，得分在 90 分以上通常被认为是一个性能表现优秀的网站。
• https://www.webpagetest.org/
• GTmetrix：同样是一个知名的性能分析工具，它会给出页面加载速度、可优化程度等方面的评分。通常，页面加载时间在 3 秒以内，且各项优化建议得分较高时，表明网站前端性能良好 。
• https://gtmetrix.com/
  分析前端性能基础教学视频：https://www.bilibili.com/video/BV1C8411V7y2/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=9a733dd9dd93beb88cbe0c3ba258b6d8
  Google Charome中Lighthouse性能分析功工具：https://developer.chrome.com/docs/lighthouse/overview?hl=zh-cn
  Preferences性能测试工具：https://developer.chrome.com/docs/devtools/settings/preferences?hl=cn
  Performance Monitor性能监视工具：https://developer.chrome.com/docs/devtools/performance-monitor?hl=cn

实际测试中关注的核心指标：

1. 先定关键指标（验收与告警的依据）

Web（建议对齐 Core Web Vitals）

web浏览器自带的灯塔工具：https://web.dev/performance?hl=zh-cn
web在线性能测试工具：https://pagespeed.web.dev/?hl=zh-cn

微信小程序（无 Lighthouse，聚焦渲染链路）

📊 微信小程序性能行业基准线（真机实测）
数据来源：
微信官方《小程序性能优化指南》《WeTest 性能基线白皮书》
腾讯内部性能测试标准（PerfDog 默认基线）

维度	指标名称	优秀标准(Top)	合格标准(Industry Pass)	说明
帧率指标(FPS)	平均FPS(Avg FPS)	≥55 FPS	≥45 FPS	页面滑动/动画流畅度
	FPS≥25帧占比	≥95%	≥85%	低帧段占比过高说明掉帧严重
	1% Low FPS(最低百分位帧率)	≥25 FPS	≥18 FPS	稳定性指标
	Smooth(帧平滑度)	≥95%	≥90%	每秒帧率波动程度，影响视觉体验
	卡顿率(Stutter%)	≤5%	≤10%	每100帧中卡顿帧数
	Drop(FPS)/h(帧丢失率)	≤300/h	≤800/h	掉帧数量
	TinyJank(轻微卡顿)/10min	≤100	≤200	小抖动频率
	BigJank(重度卡顿)/10min	≤20	≤50	严重卡顿事件数
	FTime≥100ms(超长帧占比)	≤1%	≤3%	关键体验卡顿(>100ms)
CPU指标	Avg(AppCPU)%	≤20%	≤30%	持续高CPU占用会导致发热、掉帧
	Max(AppCPU)%	≤40%	≤60%	峰值CPU短时可高，但不可持续
内存指标	峰值内存(Peak Memory)	≤400MB	≤600MB	Android普通机型建议控制在500MB内
	页面切换后内存下降率	≥90%	≥70%	页面卸载是否释放资源
GPU指标	GPU利用率(Avg)	≤35%	≤50%	持续高GPU会导致动画掉帧
温度指标	平均温度(AvgTemp)	≤40°C	≤45°C	>45°C容易降频掉帧
功耗指标	功耗(FPower)	≤1000mW	≤1500mW	高功耗会加速发热和掉帧
网络指标	首次请求耗时(TTFB)	≤0.8s	≤1.2s	小程序加载体验
	首屏渲染时间	≤2.0s	≤3.0s	用户可见速度
稳定性指标	崩溃率	0	≤0.1%	测试期内不能出现异常退出
	页面白屏次数	0	≤1次/10min	页面渲染异常情况

小程序测试工具：

1. 微信开发者工具自带的工具trace
2. PerfDog专业性能分析工具

实践是检验真理的唯一标准