“再微小的时间，我们也能计量出来”
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)，我们将立即处理
