李超海，赵丽，方有轩

（中移信息技术有限公司，深圳 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的方式后，渲染表格能最大化利用浏览器资源，同时能解决经常卡顿和僵死。……