VC页面加载监控主要分为页面交互时间和页面渲染时间
目前页面交互时间比较统一在iOS即从viewDidLoad到viewDidAppear的时间,但页面渲染时间由于和业务强关联,很难找到一个通用的方案,这里把这几天相关的资料记录下来,供大家参考
关于页面交互时间的参考文献
一种基于KVO的页面加载,渲染耗时监控方法(这个是算法的原型,后面几篇文章都是基于此做的)
https://www.colabug.com/2017/1127/1953419/
巧妙利用KVO实现精准的VC耗时检测(这篇对上一篇做了优化,并提供代码案例)
https://punmy.cn/2018/06/18/15278496835424.html
iOS界面启动耗时检测(再次进行了优化,增加了存储功能)
https://www.jianshu.com/p/87c2a6c19bec
iOS 网页加载时间监控方案实现(主要针对webview,涉及网络回调)
https://blog.csdn.net/miaogehehe/article/details/80736971
iOS runtime实战,一次性解决调试火葬场的坑(将第一篇文章用于页面访问统计和HOOK统计,里面的回调机制建议学习)
https://www.jianshu.com/p/da32399c150a
关于页面渲染时间的参考文献
用图像识别来自动确认网页加载成功(这个是一个思路,可以借鉴,但误报率较高)
https://juejin.im/post/6844903455903973390
「无侵入页面加载完成检测」的一些思路(用iOS实现了一遍,并做了优化)
http://m.udpwork.com/item/15991.html
一种新的页面加载时间检测方式(借鉴了上面的几种方案,增加了view的配置,更加贴近于业务)
https://www.codercto.com/a/61716.html
成熟APM项目对页面加载监控的方案
美团移动端性能监控解决方案Hertz(Hertz在配置文件中指定最终渲染页面的某个元素的tag,并在网络请求成功后开启CADisplayLink检查该元素是否出现在根节点下面),是页面渲染时间的监控方案,但属于半埋点
https://tech.meituan.com/2016/12/19/hertz.html
网易 NeteaseAPM (页面监控的方法是 viewDidLoad,viewDidAppear,viewDidDisappear 等方法。如果页面过于复杂渲染时间长,页面的生命周期方法会正常执行的,可以准确地取得页面的状态,慢加载也是通过页面加载时间诊断的)是页面交互时间的监控方案,可能会加入部分网络耗时,由于没有开源并不确定
美图开源工具集 MTHawkeye(内部分成了 VC Life Trace
和 ObjC CallTrace
两部分。VC Life Trace
用于跟踪打开 ViewController 各个阶段的具体时间点,ObjC CallTrace
在开启后,则可跟踪耗时大于指定阈值的 Objective-C 方法,类同于 Instrument 的 Time Profiler 功能。)是页面交互时间的监控方案,增加的耗时堆栈的获取。
https://zhuanlan.zhihu.com/p/63284100
360移动端性能监控实践QDAS-APM(UIViewController的生命周期方法里有一个方法叫viewDidLayoutSubviews,它其实是告诉了控制器的subviews布局完成的时间点。一般情况下会被调用两次,在不同的操作系统版本里调用次数也不同。)是页面渲染监控方案,调用两次的操作比较神,有空好好研究下
https://www.jqhtml.com/47687.html
携程无线APM实践(页面初始化开始,遍历页面所有元素,检测text;如果text所在坐标在页面头部(20%)/尾部(25%)区域,忽略 Text >= 2组, 认为检测成功;一轮检测之后,未检测成功,等待50ms进行下一轮检测;总共检测10s,否则超时)属于页面渲染方案,与页面占比类似,与业务贴的比较紧。
https://cloud.tencent.com/developer/article/1586420
听云APM(页面可交互时间:页面打开至用户可以正常交互的时间。Android 从 onCreat/onStart 开始至 onResume 结束。iOS 从viewDidLoad / viewWillAppear 开始至最后一个 viewDidAppear 结束。页面首屏时间:页面打开至内容展现完毕的时间(包含网络耗时)。从首个生命周期方法开始至回到主线程的最后一个异步调用方法结束。)定义了两种方案,第二种异步调用如何区分与页面渲染有关还需要研究,由于没有开源不法确定
https://doc.tingyun.com/app/html/PageAnalysis.html
闲鱼Flutter页面线上性能数据(页面加载时长是通过容器初始化后开启定时器在容器layout的时候检查屏幕渲染程度,计算可见组件的屏幕覆盖率,满足条件水平>60%,垂直>80%以上认为满足页面填充程度,再检查主线程心跳判断是否加载完成)与业务贴的比较紧,原理与页面占比类似
https://www.yuque.com/xytech/flutter/qyr9wx
比较好的开源库
FWDebug
https://github.com/lszzy/FWDebug/blob/master/README_CN.md
FYMSL
https://github.com/ifgyong/FYMSL
MTHawkeye(美图方案)
https://github.com/meitu/MTHawkeye
VCProfiler
https://github.com/panmingyang2009/VCProfiler
VCTimeProfiler