最近看到一位同事推送的一篇论文，这篇论文的核心就是介绍了一种评判网页体验指标，即speed index，被收录于webpagetest网站。由于还是比较早的论文-2013年发表的，当时app也没有现在那么盛行，所以当时这个主要应用在PC端上访问网站的体验指标。一般我们对网页体验的其中一个指标就是打开时间，打开时间越小，其体验越好，这篇论文提供了另外一个观点是：两个不同的网站，打开时间相同，但是A网站打开过程中是逐渐渲染页面完成，而B网站是空白了一段时间后在短时间内完成页面渲染。对于我们浏览一个网页的体验来说，肯定希望是有一个过渡比如A网站的那种体验，比较讨厌出现B网站的浏览体验。那用什么指标来衡量这种体验效果呢？论文作者提出了speed index的指标，并给出了指标的量化公式 ，其中渲染完成时间T
speed index= ∫1-VC/100，积分范围是从0-T，时间单位为ms，VC/100为渲染完成进度，范围是0-1
上面做了一些背景铺垫，现在切入正题，回到移动端上的app页面打开体验，其实speed Index理论也是可以使用在移动终端上app打开体验，为什么那么说呢？目前移动端上的app页面分为纯原生页面和JS页面，纯原生页面涉及页面布局、渲染等过程，而JS页面可以理解为通过JS代码适配成原生控件进行渲染，比如微信小程序之类的，这两种页面跟PC端访问页面的体验基本一致。那么这种指标我们如何去应用呢？从该公式来看，主要是VC/100的页面渲染完成进度该怎么去统计才能符合实际预期呢？这里我们不妨做一个假设，假设页面渲染这个动态过程是不断向前的，比如一个图片的渲染完成，从人的肉眼来看，是先从空白颜色->灰色背景->一半图片显示->全部图片显示，从这一角度来看，我们是否可以从页面上的每个点的rgb值来判断页面的渲染进度呢？答案是可以，根据实际的渲染过程也是基本一致的。
经过分析，这里需要解决以下两个问题:1.对于终端app来说，冷启动时间比较短，几乎是几秒甚至更快完成，如何录制启动过程？2.即使完成第一步，后面如何能量化VC?第2个问题其实还是相对比较好解决的，反而第1个问题是至关重要的，若不解决，会严重影响第2个问题的效果。为什么呢？试过高速摄影机拍摄应用启动过程的同学都知道，大家都是通过数帧的方式来计算时间的，而我们目前这种方式应用的话，即使我们把每个很短时间间隔的图片都导出来，那也是存在误差的，因为这些图片其实都包含了外部环境的色素变化，影响了实际计算。因此为了解决这个方法，我们引入了一个开源软件-minicap，这种工具只适用于android手机，可以实时截取手机屏幕变化，那么就可以不用高速摄影机去截图了。关于这个工具的介绍，可以百度或者谷歌下，我这里不做详细介绍。这里重点介绍的是如何去应用这个工具，即如何去获取界面数据以及进行图片还原。第一步是启动minicap服务，这些网上都有介绍，第二步是启动两个线程，一个负责读取界面数据，入队列，另一个从队列里取数据并进行数据解析，同时再去启动一个定时任务，把解析好的数据保存，第三步就是等需要获取图片的个数到达后，统一把保存的数据恢复成图片。这样就基本完成了截图问题了。第二个问题就是涉及到一个算法的问题了，即如何合理的反应每个截图所处的进度？这里主要的思想就是通过rgb变化路径长度来统计，也就是说假设图上的一个像素点A，需要经过s1-s2-s3-s4几个变化到最终的结果，那么我们认为s1所对应的完成度为0，s2为1/3，依次到s4就变为1。同时这里考虑到像素点存在不变化但是经过好长时间才变化的情况，那么这种情况对于不变化的几个过程，我们认为这些完成度不变，这样也是为了更精确匹配完成计算。
根据上述分析和代码输出，我们就可以完成speed index指标在终端app的应用了。经过实际应用，效果不错，完全可以从这个角度来评价体验效果，而且输出的VC图也可以反应应用启动时间，一举多得。
网友评论