基于 H5 页面“高差指纹”技术的大规模显示状态监控

1. 基于H5页面“高差指纹”技术的大规模显示状态监控王骕 (肃马) 阿里巴巴前端技术专家

2. 目录 01 研发背景 02 技术原理 03 利用方式 04 话题总结

3.

4. 研发背景为什么需要识别显示状态？

5. 识别用户场景下的页面非预期结果

6. 识别用户场景下的页面非预期结果 A B 400 A B 40

7. 技术原理

8. 关键技术点 ① ② ③ 如何找到关键轨迹点 l 首屏渲染完成 l 业务行为触发如何做特征采集 l 截屏/生成图片？ l 文档还原/DOM回放？如何利用特征并识别异常结果

9. 页面特征采集原理 - 画骨不画皮 0,0;39;10,21; 1f4320339320320, 1f4339352339339, 1f4320384320320, 1f42ee3202ee2ee, 1f4339352307339, 1f4339352307339, 1f432036b320320, 1f43203202bc2bc, 1f43072d52bc2bc, 1f42ee3202ee2ee, 1f4307352307307

10. 页面特征采集原理 - 取样策略 10 10 12 11 ? width * 0.1 5 4 4 5 6 5 6 5 4 4 5 5 4 7.5 7.75 10 12 4 4 5 5 6 6 min ? 5 avg 750 775 0x2ee 0x307 500 500 0x1f4 max leftpad ( hex ( min ( round(x * 100), 0xfff ) ), 3 ) 2ee307,1f4

11. 页面特征采集原理 - 取样策略

12. 利用方式可大可小

13. 计算并识别异常结果 - 小规模时序串接

14. 计算并识别异常结果 – 大规模识别计算淘宝H5首页 1000样本聚类 H5详情1000样本聚类

15. 计算并识别异常结果 – 大规模识别计算 ClusterCore & Label Log Parse similarity DB 064,064 [750,775,500,500] 2ee307,1f4 [100,100,100,100] Real-time computing & analysis [3200,3200,3200,3200] 2ee307 [750,775,0,0] c80,c80 ..... ....... Cluster Computing ....... SQL Grouping Client Side Monitoring System Off-line computation and analysis

16. 计算并识别异常结果 – 大规模识别计算

17. 话题总结-核心API

18. 话题总结 1. WEB页面结构，天生具有高差（无高差，不适用）； 2. 页面中最具价值的监控点：首屏完成时；业务动作触发时（显示位置、内容相对固定）； 3. 测点位置，以宽度优先（符合移动页面开发的缩放方式）； 4. 标高过程对不同元素加权 (做大方差，贴合页面视觉形态)； 5. 仅做可视化还原与串接，也是对日志信息的有效补充； 6. 当前方案用于PC页时，受视口缩放影响较大；

19. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料后续也将推送 D2 会后技术文章，敬请关注！！

20. 感谢大家观看