目录
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文件具体的某行
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/5467.html
