基于Adobe Flex实现的监控系统前台HTML5重构性能优化

李超海，赵丽，方有轩

（中移信息技术有限公司，深圳 518048）

随着监控系统接入业务系统告警量增多，基于Adobe Flex实现的技术架构渐显不足，加载缓慢、运行慢且内存占用多，性能问题频发。为保证监控系统接入更多告警及稳定运行，在保留现有主要功能的前提下我们对前台页面进行全HTML5化，并且采用Spring Boot框架对应用程序进行了代码层面上的重构。

1 优化前后交互对比

优化前采用Flex前端渲染技术，告警首页推送机制为AMF协议推送告警消息。而优化后则采用HTML5前端旋绕技术，告警首页推送机制为Web Socket推送告警消息，如图1、2所示。

优化前系统中前后台对接接口使用的是FlexService改成SpringMVC中Controller或RestController。

图1 优化前前后台交互架构图

优化前系统中告警视图展示页面使用的是Flex中的AMF协议推送告警消息，改成HTML5中的Web Socket推送告警消息。

优化前系统中视图管理这块功能在改成HTML5时并适当精简调整，保留其有用视图，去掉不需要的视图。

优化前系统中工作组管理（权限控制）这块功能是在Flex代码里控制菜单和权限的，改造成HTML5时由于需要考虑安全方面的问题，需要前后台一起控制。

图2 优化后前后台交互架构图

2 优化后系统技术优势

优化后系统技术架构图如图3所示。

图3 优化后系统技术架构图

2.1 最大化利用浏览器资源

优化前系统中前台告警首页告警表格在渲染告警时存在经常卡顿，僵死等性能瓶颈，严重影响了一线人员处理告警的效率。Flex在绑定表格时耗费浏览器资源，资源利用率也不高。改造成HTML的方式后，渲染表格能最大化利用浏览器资源，同时能解决经常卡顿和僵死。

2.2 与MQ能很好的集成，支持断开MQ后自动重新连接

优化前系统中存在不刷新告警问题，前端系统无法有效的接收到MQ推送的告警，该问题现在只能重启前台系统后，才能正常接收到MQ推送过来的消息，严重影响一线人员使用系统。优化后系统由Spring Boot搭建，该架构与MQ能很好的集成，并且支持断开MQ后自动重新连接，能解决不刷新告警问题。

2.3 基于WebSocket进行消息推送

优化前系统中前台推送的机制使用的是Flex的消息传输机制AMF协议推送告警，存在着2台电脑显示的告警不一致问题。优化系统后将会使用HTML5中的WebSocket进行消息推送，可解决2台电脑显示的告警不一致问题。

2.4 支持多种前端开发技术，符合解耦开发

优化前系统中前台的权限管理不符合使用人员的业务要求，并且该套权限管理只能用在Flex前端开发，无法移植成其它的前端技术。新系统中将使用通用的权限管理架构（用户-角色-菜单），该架构将有利于使用人员的使用，并且将支持多种前端开发技术，符合解耦开发。用户的权限将进行严格的验证，支持用户登录后权限发生将被踢下线。

2.5 更安全与更加方便维护管理

优化后系统将使用最新的Spring Boot 1.5.6进行搭建，前端页面使用thymeleaf模板引擎（Srpring的官网便是使用thymeleaf引擎开发），项目构建使用eclipse+maven，严格的进行模块划分。该架构加入了众多安全限制（如防CSRF、权限验证、Token验证），相比优化后的系统架构将更安全，更加方便维护管理。

3 浏览器兼容性采取措施

在解决浏览器兼容性问题，我们采取了以下措施。

（1）通过HTML5的底层框架来屏蔽不同浏览器的兼容问题， 我们采用了ACE框架。Ace是一个轻量、功能丰富、HTML5、响应式、支持手机及平板电脑上浏览的管理后台模板，基于CSS框架Bootstrap制

作，Bootstrap版本更新至 3.3.4，Ace Responsive Admin Template当前最新版。在该框架的基础上进行开发可解决大部分兼容性问题。

（2）针对ace框架之外未能解决的兼容性问题，主要采用Javascript控制：通过Javascript操作css样式与html标签，强制浏览器兼容，如先使用Javascript判断浏览器类型，再操作样式与标签；采用第三方替代的成熟的Javascript库，如jQuery；采用兼容性较强的Javascript插件，比如My97DatePicker.js，layer.js，zTree.js等。

（3）CSS样式方面。采用CSS Hack方式， 针对不同浏览器或不同版本的同一浏览器使用特定的CSS样式以达到浏览器兼容。

4 优化前后性能对比实验

4.1 页面操作流畅度

优化前观察现象：在优化前系统中生产环境跟踪观察发现，Flex在绑定表格时耗费浏览器资源，资源利用率也高。经常在有大量告警（100条以上）发送到前台首页时会造成鼠标移动卡顿，点击按钮反应迟缓，表格滚动困难等。

我们在测试环境下对告警首页进行告警压力测试，本次测试实验是在向其发送总共10 000条告警，每次发送告警数量为166条的倍数(平均每秒的数据量约为166)，观察不同告警条数下鼠标的移动、点击、表格滚动在100次操作样本下是否出现卡顿，满分为100，出现卡顿1次将减1。优化前后页面操作流畅度对比如表1所示。

表1 优化前后页面操作流畅度对比表

图4 优化前后页面操作流畅度对比折线图

实验结论：如图4所示，在实验环境一致的条件下，随着告警量的增大，页面操作（鼠标移动、鼠标点击、表格滚动）流畅度逐渐降低。其中优化前系统随着告警量的增大，页面操作出现轻微卡顿。优化后系统随着告警量的增大，卡顿越来越严重甚至不可用。在实验环境一致的条件下，相同告警量优化后系统页面操作（鼠标移动、鼠标点击、表格滚动）流畅度整体比优化前系统高。

4.2 CPU占用率&内存占用率

为了对比2套系统的性能，我们做了如下实验。

正常操作优化前系统与优化后系统中相同的功能（首页告警、系统管理、规则管理、告警查询等功能），记录运行30 min内每1 min CPU与内存的平均使用率。

实验结论：如图5所示，优化前系统存在某个时间点CPU占用率会一直达到100%的最高点，并且CPU使用率落差比较大。而优化后系统的CPU占用率分布在60%区间以下，也未出现CPU占用率落差比较大的情况。

图5 CPU占有率优化前后对比折线图

实验结论：如图6所示，优化前系统配置使用8G内存，实际使用率在30%区间左右，内存使用率分布较均匀。优化后系统配置使用8G内存，使用率分布在20%区间左右，内存使用率分布均匀。新系统使用的内存少于旧系统。

5 结束语

本文主要对基于Adobe Flex实现的监控系统前台采用HTML5重构优化前后的对比进行论述，介绍了RIA应用开发相关技术，Flash、Flex以及HTML5，对比优化前后技术差异，并且在保留现有主要功能的前提下控制前台告警量对优化前后性能进行实验，优化后系统整体上提高了页面操作流畅度并且降低了运行时CPU占用率和内存占用率。另优化前系统中的添加视图功能，可以拖动任意视图在页面上显示，这是由于Flex的插件机制实现的功能，HTML5实现该功能存在困难，后续系统将会往这个方向进行优化。