h5性能打点统计方案

[elover]

最近在做h5的性能优化，方案是想通过大数据打点了解真实用户情况，我们也是通过performance.timing来获取页面性能数据，可以很方便知道页面load完的时间，但是我们更想知道页面首屏时间。

目前我们大部分页面和天猫类似，采用前端异步渲染，同时为了性能优化，部分页面开始尝试做node端渲染直出。

目前我们这边有个想法，前端异步当模板生成的dom插入body时候，我们通过performance.now()来打点一个数据，获取首屏渲染时间，node端渲染的时候，底部 标记为async的js执行就通过performance.now()打一个点，不知道这种方式是否准确？

最后想了解下天猫团队是通过什么样的方式来比较准确获取页面的首屏时间，而不是页面load完的时间？

[benjycui]

但是我们更想知道页面首屏时间。

2016 年 D2 上面有类似的分享。

简单总结就是：前端无法实现，需要容器配合。

[elover]

听客户端的工程师说需要改浏览器内核，想了解下客户端实现思路是什么样的？

[cristicmf]

@benjycui 容器配合，有没有具体的一点信息，求分享。最近也在纠结这个问题，数据打点上报的不是特别准确

[zhouqicf]

@elover

目前阿里大部分团队也还在用onload、webViewDidFinishLoad、performance.timing等类似时刻来衡量页面性能，这些指标都存在2个问题，1是无法衡量一个页面是否真的加载完了，2是它只能衡量一个单一的时刻，这个时刻促发得早，不一定给人的感觉就是快，例如加载时间1s，但前9.9s页面完全空白。

天猫目前也在探索如果去衡量一个页面的真实感官性能，你说的首屏渲染时间也是感官性能的一部分，目前业界基本有2种做法：

0. 代码埋点
   • 好处是很精确
   • 缺点是侵入业务，需要每个业务同学来埋点，很难保证覆盖率，毕竟性能监控就应该覆盖所有页面，当然在一个相对标准的开发模式下是有希望在框架层面统一处理的，例如基于React的业务很容易在render等时机做通用的埋点；另外还有一个缺点是这还是一个时刻，你无法用它来衡量整个加载过程的感官性能体验
1. 通过截图对比渲染完成度
   • 在加载过程中进行高频度的截图，然后通过像素对比来确定每一个时刻的渲染完成度，基于这个思路webpagetest创造了SpeedIndex指标，简单来说它会计算每一帧的渲染完成度，并以此来计算一个综合得分。针对SpeedIndex，目前业界也有2种实现方案：
     • 1是直接通过phantomJS等工具进行截图然后按照SpeedIndex的规则进行计算
     • 2是利用Chrome Driver来导出timeline数据，然后直接通过timeline里的数据进行计算，前半部需要自己开发，后半部有现成的node模块SpeedLine
   • 好处是可以覆盖所有业务，并且能够准确衡量出感官加载速度
   • 缺点是无法进行线上大数据的采样分析

天猫目前选用的方案是第二种，最大的原因还是业务类型太多，没发做到100%的覆盖率，也无法保证业务埋点的正确性。而第一种方案会作为一种补充，业务自由决定是否埋点，并且这个数据不会做横向对比。

另外我目前正在负责天猫的Mobile性能优化项目，构建一套衡量用户真实感官性能的方案也是我接下来重点做的一件事，欢迎一起讨论

[elover]

@zhouqicf
感谢回答，如何去量化性能和性能优化也是我非常关注的点，也欢迎可以一起讨论。
关于截图，我最近也在寻找方案，比如搭建一个平台，然后去抓取页面，然后在页面加载0.5s、1s、2s等时刻截图，但是这里目前还没实现如何用工具在0.5s、1s等指定时刻去截图，不知道你这里有没有什么办法可以实现？

[zhouqicf]

@elover 截图的方法很多啊，自己写个app或者用类似phamtonjs的工具都能做，我们用的方法是Chrome Driver + SpeedLine

[elover]

@zhouqicf 截图我知道，但是基本上都是页面load完时候的截图，我这边需要是指定任意时间的截图，不知道你这说的Chrome Drive方法是依赖人去手动操作，还是通过自动化平台操作？

[zhouqicf]

@elover 自动化的，你可以试一下chrome开发者工具里的timeline，本身就有加载过程截图的功能，用Chrome Drive的目的就是通过node实现自动化的timeline数据导出