带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(3)https://developer.aliyun.com/article/1340941?groupCode=taobaotech
算法的迭代
算法的迭代主要内容是解决在计算时,提取视觉有用的有效元素和剔除用户不能感知的无效元素问题。
何为有效元素?我们认为在一个页面上,最重要的是上面展示给用户的图文信息,除此之外,就是外加的一些操作元素,主要包括按钮和输入元素。当这些元素出现并占满屏幕大部分的时候,我们就可以认为,我们内容已经完整呈现给用户了。
通过观察发现,我们还发现页面上很多元素并不是一直是无效或者有效的,比如说常规页面需要上屏的一张图片, 图片库需要先加载默认图,等到图片库网络请求完成后才上屏,只有上屏了的图片才是有效元素,这一部分可以跟标准图片库打通,并在手淘中自定义图片库中推行 APM 标准即可(少数)。
除此之外的元素,我们都将其默认视作无效元素,之前的算法,全部认为是有效的,所以才会导致可视终点过于靠前。例如在手淘首页,下发的模版中会产生大量无效控件,例如透明控件、底色控件。将不能识别的元素默认视作无效这一举动无疑会将计算的成功率拉低,但是会提高我们数据的准确性。
同时基于双端能力对齐的想法,并没有在 View 面积之和的计算上进行修改,而是基于X、Y 轴投影的算法上进行修正:
将所有的合格有效 View 对 XY 轴分别进行投影,同时将有无效标记的 View 对 XY 轴分别进行投影,当合格的投影减去无效 View 投影,分别覆盖 Y 轴的 80%,X 轴的 60%,那么页面加载完成。
现在投影算法已经是 APM 里面的推荐算法。
支持 View 打标
计算时候,会识别有效元素和无效元素的标记,这个标记是什么?在手淘中,哪些又做了这些标记呢?
页面元素铺满屏幕不等于加载完成。我们发现很多页面为了追求更好的用户体验,会生成鱼骨图、页面打底图、图片打底图,同时页面为了追求更为完美的展示效果,自定义 View 也是页面上的常规操作。为了支持各种各样的case,APM 采用 View tag 的方式进行解决,APM 中提供三个 tag 进行选择:
在手淘中,需要打标的主要包括:鱼骨图、自定义图片库、自定义View(继承于 ImageView、TextView 不需要打标)。而这一部分需要打标的 View 出现频次较低,改动较少,故而在成本较低情况下,可以大大拉高准确度。
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(5)https://developer.aliyun.com/article/1340939?groupCode=taobaotech