近期公司应用页面打开相对迟缓，用户实际感受到的时间与产线业务埋点时间差异较大，引起了业务同事对埋点数据准确性的质疑。
简单梳理了一下以后发现，误差页面普遍存在较多的展示图片。为了提高用户的体验，开发采用了预加载的方式。在真实图片下载成功之前，优先展示默认图片，但是实际埋点数据上报是在页面Dom加载完成的时候就开始上报的（前端页面基本上采用的是Vue或者React框架，在相关钩子函数进行了埋点数据的上报），但是实际上，此刻图片还没有下载完成，进而导致业务埋点数据与首屏时间差距较大。
那什么是页面的首屏时间呢？
通用意义上的首屏时间分为两类。
- 页面包含图片，首屏时间是指所有图片加载完成的时间；
- 页面不包含图片，首屏时间是指页面处于稳定状态前最后一次 dom 变化的时间。
那一般如何获取首屏时间呢？传统意义上的方法有如下两种：
1、通过相关跨应用的自动化框架进行业务场景的操作。在操作之前，设定为采集起始时间，然后进行相关操作后，选取操作响应后页面上的部分固定元素作为观察点，当其出现的时候，作为截止时间，通过截止时间与起始时间的差值作为该页面的首屏时间。
但是该种方法存在如下问题：
1）自动化框架本身存在元素定位时间长的问题，这一点在iOS上表现尤其突出，进而导致实际时间与计算时间差异比较大。
2）页面布局复杂，加载图片较多，且图片动态变幻时，不能准确确定是否页面真正呈现，导致页面首屏时间误差较大。
2、通过手动在代码埋点的方式。
但是这样存在以下问题：
1）和业务代码混用，违反设计原则。
2）覆盖不完整，在业务中覆盖率不一定能达到100%。
3）准确性不一定高，因为不同开发可能会因为页面的差异导致实现差异。
通过以上分析，传统方法获取的首屏时间与用户真实感受存在一定的误差。
那是否有更精确的方法呢？近来深度学习的应用越来越广泛也越来越热门，或许可以一下结合深度学习来获取首屏时间。
首先与传统方法类似，需要将业务感兴趣的场景自动化一下，进而可以在后续的版本迭代中持续应用。那接下来如何将其与深度学习结合呢？
很明显，在自动化启动之前，需要启用相关录屏软件进行视频的录制，当完整业务场景自动化结束的时候，终止视频的录制，生成一个test.mp4文件。接着需要安装一个视频转图片的工具ffmpeg,通过它可以将刚才生成的视频文件按照不同的帧率（fps设置的越大，误差越小，但是不宜过大，可以借鉴一下移动应用的通用帧率60fps）转成一组图片。命令格式如下
ffmpeg -i test.mp4 -y -an -q 0 -vf fps=20 test_%06d.jpg
然后将其中的跳转图片标注为N，其他图片统一标注为Y，这样深度学习需要的训练数据就得到了，如果需要进一步的大数据量训练数据，可以增加自动化场景，然后在不同的手机上进行运行，当然前提是分辨率要一致。
训练数据到手了，建议采用半监督的MixMatch方案，实验数据表明在一定数据量的前提下，测试误差直逼监督学习算法（之所以不用监督学习算法，是因为需要标注的过渡页面过多，人力成本过高），准确率可以达到接近93%，基本可以满足我们实际需要了。具体的训练过程，就不一一赘叙了。现在我们可以准确识别出过渡页与非过渡页，而转换帧率一定，通过转成图片的数字差，就可以得到实际跳转页面的完整时间，也就是所谓的首屏时间。
通过以上的方法，大大缩小了页面真实首屏时间与计算时间的误差，取得了较好的效果。如果各位对这个方案感兴趣，可以自己实现体验一波。
其他文章请关注微信公众号测试架构师养成记阅读。
