UEM系列（二）初识UEM“探针”技术

链接：https://www.toutiao.com/i6600983314784322056/

1、 UEM核心功能

用户体验一般分为移动应用体验（UEM App）和浏览器应用体验（UEM Web）两部分。对移动应用的用户体验支持，国内外很多厂商的产品都较为成熟和完善，大家在网上能够找到很多可以参考的项目，UAVStack开源项目目前主要关注于面向浏览器应用的用户体验。

一般来说，UEM的核心功能包括以下内容:

UEM系列（二）初识UEM“探针”技术

2、 "探针"技术捕获数据解密

UEM的核心在于浏览器探针，通过自动注入到监测网页的JS代码，对实际用户访问的网页性能数据进行全样本采集和分析，找到影响用户体验问题本源，帮助用户持续优化Web应用性能。

浏览器探针的作用在于以下几点：

1. 采集浏览器基本信息

2. 采集页面性能数据（Navigation Timing API）

3. 采集AJAX性能数据+请求/响应数据

4. 采集JS错误数据（包括：出错页面或脚本URL，引用页面URL，Error Message，错误位置：行号，列号，等等）

5. 采集页面追踪数据（Resource Timing API）

6. 将捕获的数据上传到UEM Server，便于进行后续的存储、多维度分析、预警和优化等

浏览器探针是根据浏览器状态来采集页面性能数据的。每次页面请求，当获取到onload事件结束，则以事件结束时间定义为页面完成时间。当有异步请求再次加载内容，那么这些异步请求记录在AJAX数据当中。基于采集到的数据，可以得到以下页面性能指标：

UEM系列（二）初识UEM“探针”技术

基于这些指标，页面加载流程的分解和可视化将会变得十分简单。

3、 页面加载流程可视化

UEM系列（二）初识UEM“探针”技术

页面加载流程可视化是UEM数据统计的一个重要手段，是UEM成果的通俗展示方式。上图是页面加载流程可视化的一个示意图。上述页面性能数据是实时上传的，但数据上传分四个时机：整个页面加载完成后上传、离开页面时上传、发生JS错误时上传和有AJAX请求时上传。此外，浏览器探针是自动注入到监测网页的，UEM Server会监听应用服务器的输出，当用户开启自动注入功能，UEM Server会在应用服务器的输出函数内自动注入UEM的浏览器探针，具体实现方式将在以后的分享中详细介绍。通过大量的实验室数据对比，自动注入UEM浏览器探针对服务器性能几乎无影响。