【案例】中国银行：金融应用端侧性能监控分析平台建设实践

中关村互联网金融研究院 2023-03-28

摘要

随着物联网的发展以及银行数字化转型战略的推进，移动应用的使用越发普遍，对客金融应用使用H5技术开发的占比高达90%以上。越来越多的业务线上化，也使得金融系统越发复杂，性能优化措施越多，整体优化难度加大。通过建设金融应用端侧性能监控分析平台，可以提升银行应用H5页面性能，提升系统稳定性，保障金融服务质量。

作者：中国银行软件中心（西安）张家登黄佳兴王冰陈冰孙亭

-01-

建设背景

在数字化转型的今天，由于H5技术的跨平台、不需下载安装的特性，无论是对于用户体验或对于企业成本而言都拥有着无与伦比的优势，因此基于H5技术开发的应用仍然是市场主流，且将继续保持市场份额领先地位，根据估算，中国银行90%以上的对客金融应用均使用H5技术开发，移动App应用中60%-80%都是使用H5技术开发。

在移动互联网飞速发展的大背景下，在原有移动端系统iOS、安卓的基础上，又增加了鸿蒙操作系统；同时随着物联网的发展，有越来越多的IoT终端设备的加入，端侧应用需求越来越大，可以预见H5技术的跨平台优越性将进一步扩大其应用范围，中国银行也一度要求所有功能尽量使用H5开发。尽管这一决定在很大程度上是为了缩减开发成本，但是中国银行在客户体验上的追求是臻于至善的，从最初各产品自行组织体验测试到随后客户体验模型的建立，都说明了中国银行对于客户体验的重视程度。

性能对客户体验的影响是一个老生常谈的话题，也是永不过时的话题。根据经验，用户等待时间在1s以内体验最佳（用户心理在点赞），2s以内基本无感（用户正常感受），3s以内属于尚可接受（眼睛往别处瞟一眼再回来，或有点皱眉头），3s以上则可能引起不耐烦、焦虑等不适情绪，用户开始变得对交易的无安全感以及对企业的不信任。通过对日访问次数、活跃用户数的统计，可以发现性能提升对用户留存产生着重大的影响。

要做好性能优化，需要从多方面、采取多措施进行。通常，应用越复杂，性能优化也会越发复杂，一般会涉及到程序、中间件、架构、资源等方方面面。随着数字化转型的加速推进，业务数字化的需求日益膨胀，因此，中国银行软件中心致力研发了金融应用端侧性能监控分析平台，实现对应用页面性能进行主动监测、全面诊断及实时预警，整体提升中国银行金融应用的客户体验。

-02-

页面性能监控平台设计

（一）建立性能量化模型

金融应用端侧性能监控分析平台的目标是识别并提升H5页面性能。如何让平台能如用户一般感同身受，对页面性能进行描述是平台要解决的首要问题。一般，页面的打开速度是影响用户感受的最直接且关键的要素，同时，随着大量的业务逻辑前移，应用越发复杂，影响用户感受的性能因素随之增加。结合对现代H5开发技术和体验模型的分析，可以发现众多影响用户体验的节点，比如页面的总加载时间、首次渲染时间、最大节点渲染时间、有意义的绘制时间、可交互时间、用户可输入时间、页面平均加载速度、总等待时间等。通过对这些节点时间的统计，能更加全面准确的评估/描述页面性能，并依此建立页面性能之于用户体验的量化模型，准确的评测页面对于用户的性能表现，发现性能问题。

（二）梳理性能指标与优化措施

平台进一步需要做的是准确诊断出导致性能问题的原因，并提出优化方案。一般来说，导致H5页面性能缓慢的原因有很多，可能是网络速度问题，SSL握手效率问题，DNS寻址太慢，服务器负载过大，请求数量太大等等，我们梳理了如下可能影响H5页面性能的关键指标项：

在页面运行过程中，平台对以上关键指标进行收集检测，经过特定计算，诊断性能瓶颈并推荐优化方案，诸如html/js/css资源压缩、图片压缩、请求数量控制、gzip文件压缩、缓存应用、http2协议以及service worker/web worker的应用，通过控制文件体积、数量、压缩、缓存等，缩减网络传输量，降低了企业带宽成本和用户流量，对企业和用户均具有正向收益。

按照以上分析设计，平台实现各指标的收集和检测，以SDK的方式提供给各应用进行调用，实时收集应用中页面的性能相关指标数据并加以诊断。

（三）诊断与预警

综上，影响页面性能的指标众多，每一项指标因其数量不同对页面影响的程度也不一样，例如：当资源请求数量分别为10/20/100时，10个请求与20个请求的影响程度基本一致，但是100个请求以上则可能是导致性能瓶颈的关键因素；同理，一张图片太大将影响页面性能，但是具体多大时会产生较大影响？因此我们总结过往最佳实践经验，对各项指标建立加权模型，分别设置不同的权重以及严重阈值，以准确的评估页面性能。阈值的设置也使得平台能更好的诊断可能存在的重大性能问题，通知相关干系人便于及时改进，保障金融应用质量。

各指标对性能的影响没有固定的标准，对于权重的分配和阈值的设定也非严格不变，因此平台通过设置参数模型，赋以最佳实践经验并可进行迭代优化。

（四）改进工艺流程

业界已有类似的性能诊断相关工具，诸如firefox插件、yslow和谷歌的lighthouse等，但是这些工具普遍存在的问题是：

1.检测指标不够全面，很多工具未及时更新；

2.诊断登录后的页面较为困难和复杂；

3.无法实现与App的交互，与实际运行环境不符；

4.持续集成困难，无法接入到持续交付过程中，不能自动常态化监控检测，对于页面是否进行性能检测则由开发人员经验和意愿决定；

5.无法区分开发态、测试态、生产运行态等。

平台自主化开发可解决及时更新的问题，通过引用SDK的方式则可解决登录后页面诊断监控以及与App交互等需要。针对第4、5点，整个应用开发工艺流程包含了开发态、测试态、自动回归测试、生产运行时等不同时期，在不同的时期，程序的运行环境不同，性能收集的需求不尽相同。由于性能SDK本身运行需要消耗设备资源，当在开发态和测试态时可以完全收集性能指标数据进行分析，以全面诊断性能问题；对于生产运行态，一般地，应用已经完成相应的优化，主要监控异常性能状况如网络、服务状态等。

为了让平台能更加方便的契合到整个开发工艺流程和持续交付过程中，我们提供了不同的插件以适配不同的工艺环节，解决不同阶段对SDK的引入、注入、构建以及自动化等需求。

-03-

实践成效

本次实践从中国银行手机银行App和跨境场景App中分别选择了部分功能进行接入，只需在工程模板页完成SDK的引入，无需侵入现有业务代码逻辑，对现有业务影响小，使用方便。现已达成了平台建立的初步目标：诊断登录后页面、在App内运行诊断保持与实际环境一致、可以对调用了原生API的页面进行诊断。由于SDK内少量API依赖于浏览器实现，可能存在兼容性问题，根据API说明，大部分API在iOS11以及安卓5以上可用，经过测试符合预期。

通过将实践工程分别部署在开发环境、测试环境，并使用不同的测试终端、3G网络、4G网络、5G网络和WIFI环境，可以模拟不同场景下的性能表现；通过匹配实际性能表现和所测的性能量化数据，以及横向对比页面之间的性能数据，进而对量化模型中各指标的权重配置、评分审计细则进行优化校准。

结合各指标的评测结果和设定的阈值，可以快速发现页面中众多资源问题，如图片原始尺寸超过3倍图要求的倍率，图片存在拉伸现象等，严重影响渲染性能和浪费网络流量。根据报告中提供的优化指引，我们对所有图片进行压缩处理并以符合显示需要的大小、比例进行优化，结果发现多个图片存在10-100k不等的优化空间，部分图片甚至达到2M/幅，按此推算，单个用户在一个App上的一次访问，可能存在100k至几兆的优化量，换算成服务器高峰时段所有用户并发访问下的总流量，单个App则可能达到几百兆甚至GB级的流量节省，多个APP的优化则存在更大的空间，故此类优化对企业和用户都具有巨大的收益。