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

摘要

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

作者:张家登，黄家兴，中国银行软件中心，孙婷，陈冰，王冰

-01-

建设背景

在数字化转型的今天，由于H5技术的跨平台和无需下载安装，无论是从用户体验还是企业成本来看，都具有无可比拟的优势，因此基于H5技术的应用仍然是市场的主流，并将继续保持市场份额的领先地位。据测算，中国银行90%以上的客户对客户金融应用由H5科技开发，60%-80%的手机app应用由H5科技开发。

在移动互联网快速发展的背景下，鸿蒙系统操作系统是在原有移动终端系统iOS和Android的基础上增加的。同时，随着物联网的发展，越来越多的物联网终端设备加入，端到端的应用需求不断增加。可以预见，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和Google lighthouse等。，但这些工具的共同问题是:

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

2.登录页面诊断困难且复杂；

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

4.持续集成比较困难，所以无法连接到持续交付流程，也无法自动常态化进行监控和测试。是否对页面进行性能测试，由开发人员的经验和意愿决定；

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

平台自主开发可以解决及时更新的问题，通过参考SDK，可以解决登录后的页面诊断和监控以及与App交互的需求。根据第4点和第5点，整个应用程序开发过程包括不同的阶段，如开发、测试、自回归测试和生产运行时。不同时期，程序的运行环境不同，对性能采集的要求也不同。由于性能SDK本身的运行需要消耗设备资源，因此在开发状态和测试状态下都可以完整地收集和分析性能指标数据，从而全面诊断性能问题；对于生产运行状态，一般应用已经完成了相应的优化，主要是监控网络、服务状态等异常性能状态。

为了让平台更方便的融入整个开发过程和持续交付过程，我们提供了不同的插件来适应不同的过程环节，解决SDK导入、注入、构建、自动化不同阶段的需求。

-03-

实际效果

在本练习中，从中国银行手机银行App和跨境场景App中选择部分功能进行访问。只需要在工程模板页面完成SDK的引入，不入侵现有业务代码逻辑，对现有业务影响小，使用方便。现在已经达到了平台建立的初期目标:对登录的页面进行诊断，在App内运行诊断与实际环境保持一致，能够使用原生API对页面进行诊断。由于SDK中有少量API依赖于浏览器实现，因此可能存在兼容性问题。根据API描述，大部分API在iOS11和Android 5或以上版本都有，测试后符合预期。

通过将实际项目分别部署在开发环境和测试环境中，使用不同的测试终端、3G网络、4G网络、5G网络和WIFI环境，可以模拟不同场景下的性能。通过实际性能与实测性能量化数据的匹配，以及页面间性能数据的横向比较，优化标定量化模型中各指标的权重分配和评分审核规则。

结合各个指标的评测结果和设定的阈值，可以快速发现页面中的很多资源问题，比如图片的原始大小超过了要求的3倍放大倍数，图片被拉伸，严重影响渲染性能，浪费网络流量。根据报告中提供的优化指南，我们对所有图片进行了压缩，并在满足显示要求的大小和比例上进行了优化。结果我们发现很多图片都有10-100k的优化空，有的甚至达到了2M/图片。照此计算，单个用户访问一个App可能有100k到几兆的优化。换算成服务器高峰时段所有用户的总流量，单个App可能实现几百兆甚至GB的流量节省，而多个App的优化有更大的空区间，所以这种优化对企业和用户都有很大的好处。

-04-

展望与思考

从目前实践的效果来看，金融应用端到端性能监测分析平台的建设有利于提升中国银行H5应用性能，其优化效果可见一斑。一个在设计之初没有考虑到的潜在优化是，在保存了所有页面的性能数据后，可以基于大数据分析更精确地迭代优化页面性能阈值。通过对比业内其他应用甚至业内开发的应用的页面性能数据，可以更清晰的认识到应用性能的高低。

在这种实践中，平台并没有连接到现有应用开发的持续交付过程中，阈值预警机制有待完善。可以肯定的是，目前设定的几个插件技术，如webview注入、selenium注入、插件构建技术等都已经比较成熟，插件开发完成后，必将实现高性能金融应用的持续交付。

毋庸讳言，虽然平台的搭建有利于整体应用性能的提升，但仍然不能解决或发现所有的性能问题，比如运行数据的优化，以及元宇宙虚拟现实等新技术的应用。所以性能优化和体验优化永远是需要重点关注的问题。

声明:本公众号发布内容和图片的目的是为了传播更多信息。版权归原作者所有，不得用于商业用途。如有侵权，请联系我们。

中关村互联网金融研究院关注中关村互联网金融研究院，即时接收互联网金融、金融科技行业资讯、研究报告、线下活动等信息。微信官方账号原创文章18篇