带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(6)

本文涉及的产品
应用实时监控服务-应用监控,每月50GB免费额度
应用实时监控服务-用户体验监控,每月100OCU免费额度
简介: 带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(6)

带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(5)https://developer.aliyun.com/article/1340939?groupCode=taobaotech

自定义页面根 View

 

APM 计算的根结点默认是页面上的 DecorView,往下遍历的根结点是否是合理的呢?存在修改的可能吗?是存在的,自定义页面根 View 可以更细粒度的控制页面。

 

对于页面的理解一定是 Activity 或者 Fragment 吗?不是的,我们既然讨论的时候用户体感加载时长,那么我们应该更多的从用户视角去考虑这件事情。例如,逛逛页面上有两个   tab,基于用户角度,我们更愿意理解成两个页面,推荐页面和关注页面。

 

以逛逛关注页面为例,点击关注 tab 时候创建了页面,整个关注页面也只是整个页面的一部分,下图为校准后的效果:

 

 

 

image.png

APM 中提出了 Page (页面)的概念,每一个 Page 有一个对应的 pageRootView,使用 pageRootView 来进行页面加载比率计算。

 

当我们仔细去观察页面的 View 树结构时,还发现自定义页面根结点带来了更大的灵活性,对于异常 case 也有了更多的处理手段,这里举一个我们在校准过程中遇到的例子,逛逛首页加载校准:

 

逛逛的首页是一个 Fragment,按道理说可以直接进行度量,但是在校准的时候发现:逛逛首页(推荐)有一个全局背景图。当尝试使用打标解决的时候才发现,逛逛业务定义了自身框架的 DSL,整个页面使用的是 DSL 进行编写(RN 原理),所有 ImageView 都是相同的 View,并没有任何特殊性,在端侧根本不感知这个背景图。这就意味着打无效标的办法不能用了。

 

那么还有其他低成本的办法吗?当然有的,查看逛逛首页的布局,发现全局背景图在整棵 View  树非常靠上的位置,与真正有效的 View 节点并没有关联,那么只需要将有效的子 View 树的根结点作为计算的起点就可以了。

 

 

 

image.png

 

注:在原始 APM 计算逻辑中,是使用整棵 View 树的根节点来进行向下遍历计算的

 

 

最后的方案:更换逛逛首页的页面根结点(pageRootView)。

 

下面是逛逛首页的校准效果,如果没有进行校准,那么当背景图出现的时候就是页面加载的结束点,而且二刷也没完。通过打标解决了二刷问题,通过修正页面根 View 解决背景图问题,由于页面 ImageView 存在动画,所以加载完成后会有一个渐显的动画,当前 APM 认为这个渐显动画不影响可视点:

image.png

 

带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(7)https://developer.aliyun.com/article/1340937?groupCode=taobaotech

 

相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
相关文章
|
监控 Android开发 UED
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(1)
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(1)
192 0
|
Web App开发 移动开发 前端开发
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(7)
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(7)
153 0
|
算法 数据处理 UED
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(4)
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(4)
113 0
|
算法 Android开发 容器
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(2)
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(2)
153 0
|
算法 UED
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(3)
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(3)
105 0
|
数据处理 Android开发
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(5)
带你读《2022技术人的百宝黑皮书》——APM 页面加载耗时校准(5)
124 0
|
1月前
|
移动开发 监控 Android开发
Android & iOS 使用 ARMS 用户体验监控(RUM)的最佳实践
本文主要介绍了 ARMS 用户体验监控的基本功能特性,并介绍了在几种常见场景下的最佳实践。
|
3月前
|
运维 监控 数据可视化
ARMS的微服务监控
【8月更文挑战第23天】
74 6
|
6月前
|
监控 Java 索引
APM Server监控
APM Server监控
|
3月前
|
监控 前端开发 JavaScript
ARMS的Web应用监控
【8月更文挑战第23天】
64 8