WEB网页性能测试

目录

WEB性能指标

FPS:每秒帧数

RAIL指标

Performance

录制

帧分析

Frames

Main


WEB性能指标

FPS:每秒帧数

人的眼睛看24FPS的动画时,会觉得卡顿;是不是WEB页面的FPS要一直保持>24呢? 其实人对连贯视觉效果的东西比较在意fps,如游戏,动画等;相比来说对网站的fps要求并没有那么高,具体怎么设定性能指标参考一下RAIL。

RAIL指标

RAIL步骤

关键指标

用户操作

响应

输入延迟时间(从点到绘制)小于100毫秒

用户点击按钮(例如登录,提交)

动画

每个帧的工作(从JS到绘制)完成时间小于16毫秒

用户滚动页面,拖动手指(例如,打开菜单)或看到动画。 拖动时,应用的响应与手指位置有关(例如,拉动刷新、滑动轮播)。 此指标仅适用于拖动的持续阶段,不适用于开始阶段。

空闲

主线程JS工作成分不大于50毫秒的块

用户没有与页面交互,主线程可利用空闲时间处理页面工作,不过应预留足够用的时间来处理用户的下次交互

加载

页面可以在1000毫秒内就绪

用户点击查询加载页面到看到相应内容

什么是RAIL?

RAIL是一种以用户为中心的性能模型,每个网络应用均具有与其生命周期有关的四个方面。

RAIL内容详情:https://web.dev/rail/?utm_source=devtools#goals-and-guidelines

Performance

Performance是Chrome浏览器提供的专业的网页性能分析工具,可以通过录制火焰图来收集网页渲染时对cpu使用占比与网页fps指数,帮助到开发测试人员来确认前端性能问题与定位性能问题代码

入口:Chrome浏览器---开发者选项(F12)---Performance

它有三个主要的功能

录制

1、打开Chrome浏览器的无痕模式,按F12进入开发者工具,选择Performance

2、进入到测试目标系统,找到需要录制的功能页面,点击Performance下的Record按钮,然后操作功能页面刷新

3、等功能页面响应完成,点击录制中的Stop按钮,Performance会将响应过程的所有信息全部展示出来,录制时间在4~6秒左右即可。

 

展示出来的详细可以参考下面的三个功能的讲解图

帧分析

 FPS

FPS(帧率)在最上方动画记录区域可以看到完整的图。绿色竖线越高,FPS越高,红色的话表示长时间帧,很可能会出现卡顿,所在测试的时候要特别注意红色部分

CPU

CPU火焰图,充满颜色表示CPU使用率高,一般CPU充满时,表示FPS也是最活跃的时候。HTML 文件为蓝色、脚本为黄色、样式表为紫色、媒体文件为绿色、其他资源为灰色

 NET

Net部分可以将屏幕逐帧录制下来,可以帮助观察页面的状态,主要用处,可以帮助分析首屏渲染速度

Frames

 Frames可以查看指定帧的FPS

Duration 233.57ms(at 3.44s) 在3.44s时,使用233.57ms渲染

FPS  4 表过fps 4帧/s 约等于1s/233.57ms 

CPU time  282.79ms 表示CPU处理这一帧用了282.79ms

Main

Main可以追溯定位问题源

红三角对应关fps上面的红色标识,意味着此处有问题。

Main火焰图颜色与CPUl图颜色定义一样:HTML 文件为蓝色、脚本为黄色、样式表为紫色、媒体文件为绿色、其他资源为灰色

黄色是脚本 右图表示Event:mouseenter黄色事件有问题,点击Function Call可以定位到具体js文件

如果是JS有问题,还可以其下看到紫色小火焰,用其来定位到js文件具体的某行

  • 2
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

魂尾ac

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值