客户端系统化体验分析：一种无入侵的设计与实现

原创舒徐、玖味、大蜀大淘宝技术

本文主要阐述一种客户端体验分析的思考与系统化实践。优化用户体验的关键点在于如何评估衡量用户体验，传统用户体验分析度量主要有埋点耗时统计及录屏帧耗时统计等手段，这些方法存在开发接入成本较高，分析结果粒度较粗等问题。为了解决传统体验分析中的若干问题，我们提出了基于无线AOP的端到端链路分析和评估方法，该方案采用无入侵方式降低了接入成本，同时将交互链路片段化并产出细粒度分析结果，实现了客户端上用户行为链路的标准化度量及客户端全景体验分析，为客户端体验问题的定位及优化提供有力的支持。

介绍

本文介绍的技术方案，旨在阐述一种通用的客户端用户体验评估、排查方案，通过客户端切面能力实现自动化插桩统计用户行为、系统行为、业务逻辑、服务端请求等各个片段耗时，同时通过全局唯一的客户端链路ID关联到多应用分布式服务端的链路ID，实现客户端到服务端的完整链路的打通。

体验度量计算部分通过实时日志服务及实时/离线计算，根据链路ID、特征ID、场景进行聚合分析处理，产出实时链路、离线的聚合场景数据进行客户端全景分析，实现用户体验行为可追溯和全景化。结合自动化脚本、客户端链路采样，实现用户体验自动化聚合分析，最终帮助开发发现用户体验问题，并精准优化。

本方案的特点包括：

无入侵：只需引入客户端切面SDK，无业务逻辑修改，接入成本低。同时也提供开放能力，允许业务按照切面数据规范，实现定制能力。
高效：平台实时采集用户体验链路日志，产出实时链路、聚合链路可视化数据，无繁琐的人工统计耗时。
精准定位：用户体验链路解构到方法级别，一键定位体验耗时问题，彻底优化。

技术方案

优化用户体验的首要问题是如何评估衡量用户体验，传统用户体验衡量方案两种，一埋点耗时统计，二录屏帧耗时统计，已有的两种传统方案的开发接入成本较高，耗时节点定位不够清晰，所以我们期望提供一种标准&高效的用户体验评估方法。

▐ 客户端链路

基于AOP能力对用户产生的点击、滑动、长按等操作进行统一捕获并作为一条链路的起始点，将用户行为触发的一系列Android生命周期的变化以及服务端请求发起、网络传输、客户端响应等作为链路过程，最后由界面绘制布局变化作为链路的终点，从而可形成一条由用户交互行为到服务端请求再到客户端布局更新的链路闭环。该客户端SDK对链路中每一节点的耗时以及节点间调用关系进行记录与串联，清晰准确地还原了交互链路中各节点耗时以及调用层级关系。

▐ 服务端链路

服务端链路基于现有的服务端分布式调用链路，通过客户端traceId关联服务端traceId，可以打通客户端到服务端的整个链路。具体内容不另加赘述。

▐ 数据处理

结合客户端链路、服务端链路，我们可以采集到用户体验链路上每个环节的详细信息，通过客户端埋点日志及实时计算(基于阿里Blink)，可以呈现用户每次点击的实时链路片段；此外通过特征聚合、场景聚合，产出应用大盘聚合数据。

客户端切面SDK提供统一的插桩打点标准，用户体验链路数据自动采集上报，结合团队自研的自动化遍历任务或人工体验、用户客户端采样，做到0成本获取用户体验数据。同时全端统一埋点链路数据详细的记录了客户端、服务端方法级别的耗时，精准定位问题根因，优化用户体验效率大大提升。

▐ 全端链路方案VS传统方案

技术方案	接入成本	使用成本	定位效率
业务埋点	代码改造，成本大	成本一般	信息不全
录屏帧耗时	无接入成本	成本大	只能暴露耗时，很难定位
全端性能体验	无侵入，成本小	成本小	精准定位

以躺平APP发现Tab下拉刷新为例

视频中页面下拉刷新的操作对应的实时链路如下，链路整体耗时857ms，整个链路的细节如下图：

用户链路聚合分析示例

通过切面SDK插桩提取用户链路特征值，对用户体验链路可以在不同维度进行聚合分析。配合大数据处理能力，产出App-页面-行为多维度的聚合数据，主要用于App大盘监控、用户热点场景链路分析

用户体验优化案例

▐ 躺平家App白屏case优化案例

该案例为点击首页某个按钮后进入下一个界面出现了白屏，整体链路耗时1886ms,从上图的链路中可以看出主要有两个原因：

H5界面从loading开始到结束耗时超过1000ms
出现5个顺序串行执行的服务端请求，该5个请求耗时将近约700ms

针对第一个H5界面loading时间长的原因，前端需通过发布前端资源缓存，将(HTML/JS/CSS/IMG…)打包预加载到客户端或优化代码的方式降低页面加载耗时

针对第二个服务端请求耗时的情况，可通过并发请求或合并接口等方式降低串行请求带来的时间成本

▐ 页面并发请求优化案例

以点击用户头像进入用户个人主页为例，个人主页加载分为两部分，1加载头部的个人信息，2内容Feed流。从视频中可以明显的看到头部个人信息很快就加载完成了，但是内容Feed流加载白屏过渡很明显。具体原因见下方通过全端链路定位分析

在图示的全端用户体验链路中，页面加载会发起多个服务端请求，观察发现请求4在请求3的reponse返回后才串行发起。

内容Feed流的请求4(耗时284ms)参数依赖请求3接口返回，导致请求3、请求4必须串行执行，必然造成个人主页个人信息加载完成后，内容Feed部分未加载完成，需要白屏等待。
通过优化个人主页代码接口，拆分依赖关系，使得请求4在页面初始化时同请求1异步发起请求，理论上可以节省78ms。页面耗时599-78=521ms，用户体验进一步优化，页面响应用户体验提升13%。