“再微小的时间,我们也能计量出来”
01 项目背景
响应时间是H5页面带给用户的最直观的性能体验,在<2s 时间内保证数据加载完成且可以进行下一步操作,是比较优秀的表现 。而如果在2-5秒后才进入可用的状态,用户的耐心会逐渐丧失,继续操作的可能性会减少, 导致用户流失;而>5s 则很少有用户能够接受。
为了用户更好的体验,提升用户使用产品的积极性,所以决定进行以“秒开无白屏”,“一秒钟法则”为目标的M页性能优化升级
02 M页改善主要用了哪些技术方案?
一秒钟法则(首屏加载在1s左右,即在可见的屏幕范围内,内容展现完全):
1、优化接口返回数据:
2、接入SSR
3、离线包
4、图片压缩
秒开无白屏(首次看到M页有内容的时间在0.3s以内):
1、 骨架屏
2、 首屏加载时长缩短时,白屏时长相应的减少
03 测试方案设计
当前项目要求计算结果准确度高(单位毫秒级别),而且我们录入的视频长度一般都比较短,所以最终选用了视频分帧方案。
04 测试方案实现
视频分帧计算主要由以下两种步骤来完成
1、 录制视频
录制视频的几种方式:adb命令,手机系统自带的录制等
录制的内容:从用户点击到页面加载结束
2、 视频分帧计算:
主体思路通过将视频分帧,找到点击起始帧,要计算的结束帧,计算实际相应时间
白屏响应时间=白屏最后一帧的时间 – 点击时的起始帧时间
首屏加载时间=内容完全加载出来那一帧的时间 – 点击时的起始帧时间
可以借助第三方视频拖帧软件分帧计算,也可以通过脚本自动分析视频自动计算。作为一个以提高效率为己任的测试人员,必然要选择第二种方式。
05 分帧计算的脚本实现
脚本要做的事:录制视频、视频分帧、时长计算,这里讲一下视频分帧计算的部分。
视频分帧计算主要分为下面三步:
1、 通过Python的VideoCapture将视频分帧存储
2、 分帧图片命名,使用当前视频播放时间位置(毫秒)命名存储图片
3、 时长计算=结束帧名称 - 起始帧名称
以时间为维度命名,减少了人工根据帧数去计算时长的工作,结果更直观
分帧存储结果如下:
通过脚本可以高效快速的批量处理多视频,同时更便于选取计算的时间节点。
通过图片识别等技术,可以抛去人工部分,自动选取白屏节点帧,自动计算白屏时间。
最后,在脚本工具辅助下,使项目组在较少测试人力情况下,快速响应了多业务的M页性能测试任务,最终按期保质量的完成了项目目标。
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理