基于Adobe Flex實現(xiàn)的監(jiān)控系統(tǒng)前臺HTML5重構(gòu)性能優(yōu)化

李超海，趙麗，方有軒

（中移信息技術(shù)有限公司，深圳 518048）

隨著監(jiān)控系統(tǒng)接入業(yè)務(wù)系統(tǒng)告警量增多，基于Adobe Flex實現(xiàn)的技術(shù)架構(gòu)漸顯不足，加載緩慢、運行慢且內(nèi)存占用多，性能問題頻發(fā)。為保證監(jiān)控系統(tǒng)接入更多告警及穩(wěn)定運行，在保留現(xiàn)有主要功能的前提下我們對前臺頁面進行全HTML5化，并且采用Spring Boot框架對應(yīng)用程序進行了代碼層面上的重構(gòu)。

1 優(yōu)化前后交互對比

優(yōu)化前采用Flex前端渲染技術(shù)，告警首頁推送機制為AMF協(xié)議推送告警消息。而優(yōu)化后則采用HTML5前端旋繞技術(shù)，告警首頁推送機制為Web Socket推送告警消息，如圖1、2所示。

優(yōu)化前系統(tǒng)中前后臺對接接口使用的是FlexService改成SpringMVC中Controller或RestController。

圖1 優(yōu)化前前后臺交互架構(gòu)圖

優(yōu)化前系統(tǒng)中告警視圖展示頁面使用的是Flex中的AMF協(xié)議推送告警消息，改成HTML5中的Web Socket推送告警消息。

優(yōu)化前系統(tǒng)中視圖管理這塊功能在改成HTML5時并適當(dāng)精簡調(diào)整，保留其有用視圖，去掉不需要的視圖。

優(yōu)化前系統(tǒng)中工作組管理（權(quán)限控制）這塊功能是在Flex代碼里控制菜單和權(quán)限的，改造成HTML5時由于需要考慮安全方面的問題，需要前后臺一起控制。

圖2 優(yōu)化后前后臺交互架構(gòu)圖

2 優(yōu)化后系統(tǒng)技術(shù)優(yōu)勢

優(yōu)化后系統(tǒng)技術(shù)架構(gòu)圖如圖3所示。

圖3 優(yōu)化后系統(tǒng)技術(shù)架構(gòu)圖

2.1 最大化利用瀏覽器資源

優(yōu)化前系統(tǒng)中前臺告警首頁告警表格在渲染告警時存在經(jīng)?？D，僵死等性能瓶頸，嚴重影響了一線人員處理告警的效率。Flex在綁定表格時耗費瀏覽器資源，資源利用率也不高。改造成HTML的方式后，渲染表格能最大化利用瀏覽器資源，同時能解決經(jīng)?？D和僵死。

2.2 與MQ能很好的集成，支持斷開MQ后自動重新連接

優(yōu)化前系統(tǒng)中存在不刷新告警問題，前端系統(tǒng)無法有效的接收到MQ推送的告警，該問題現(xiàn)在只能重啟前臺系統(tǒng)后，才能正常接收到MQ推送過來的消息，嚴重影響一線人員使用系統(tǒng)。優(yōu)化后系統(tǒng)由Spring Boot搭建，該架構(gòu)與MQ能很好的集成，并且支持斷開MQ后自動重新連接，能解決不刷新告警問題。

2.3 基于WebSocket進行消息推送

優(yōu)化前系統(tǒng)中前臺推送的機制使用的是Flex的消息傳輸機制AMF協(xié)議推送告警，存在著2臺電腦顯示的告警不一致問題。優(yōu)化系統(tǒng)后將會使用HTML5中的WebSocket進行消息推送，可解決2臺電腦顯示的告警不一致問題。

2.4 支持多種前端開發(fā)技術(shù)，符合解耦開發(fā)

優(yōu)化前系統(tǒng)中前臺的權(quán)限管理不符合使用人員的業(yè)務(wù)要求，并且該套權(quán)限管理只能用在Flex前端開發(fā)，無法移植成其它的前端技術(shù)。新系統(tǒng)中將使用通用的權(quán)限管理架構(gòu)（用戶-角色-菜單），該架構(gòu)將有利于使用人員的使用，并且將支持多種前端開發(fā)技術(shù)，符合解耦開發(fā)。用戶的權(quán)限將進行嚴格的驗證，支持用戶登錄后權(quán)限發(fā)生將被踢下線。

2.5 更安全與更加方便維護管理

優(yōu)化后系統(tǒng)將使用最新的Spring Boot 1.5.6進行搭建，前端頁面使用thymeleaf模板引擎（Srpring的官網(wǎng)便是使用thymeleaf引擎開發(fā)），項目構(gòu)建使用eclipse+maven，嚴格的進行模塊劃分。該架構(gòu)加入了眾多安全限制（如防CSRF、權(quán)限驗證、Token驗證），相比優(yōu)化后的系統(tǒng)架構(gòu)將更安全，更加方便維護管理。

3 瀏覽器兼容性采取措施

在解決瀏覽器兼容性問題，我們采取了以下措施。

（1）通過HTML5的底層框架來屏蔽不同瀏覽器的兼容問題， 我們采用了ACE框架。Ace是一個輕量、功能豐富、HTML5、響應(yīng)式、支持手機及平板電腦上瀏覽的管理后臺模板，基于CSS框架Bootstrap制

作，Bootstrap版本更新至 3.3.4，Ace Responsive Admin Template當(dāng)前最新版。在該框架的基礎(chǔ)上進行開發(fā)可解決大部分兼容性問題。

（2）針對ace框架之外未能解決的兼容性問題，主要采用Javascript控制：通過Javascript操作css樣式與html標(biāo)簽，強制瀏覽器兼容，如先使用Javascript判斷瀏覽器類型，再操作樣式與標(biāo)簽；采用第三方替代的成熟的Javascript庫，如jQuery；采用兼容性較強的Javascript插件，比如My97DatePicker.js，layer.js，zTree.js等。

（3）CSS樣式方面。采用CSS Hack方式， 針對不同瀏覽器或不同版本的同一瀏覽器使用特定的CSS樣式以達到瀏覽器兼容。

4 優(yōu)化前后性能對比實驗

4.1 頁面操作流暢度

優(yōu)化前觀察現(xiàn)象：在優(yōu)化前系統(tǒng)中生產(chǎn)環(huán)境跟蹤觀察發(fā)現(xiàn)，F(xiàn)lex在綁定表格時耗費瀏覽器資源，資源利用率也高。經(jīng)常在有大量告警（100條以上）發(fā)送到前臺首頁時會造成鼠標(biāo)移動卡頓，點擊按鈕反應(yīng)遲緩，表格滾動困難等。

我們在測試環(huán)境下對告警首頁進行告警壓力測試，本次測試實驗是在向其發(fā)送總共10 000條告警，每次發(fā)送告警數(shù)量為166條的倍數(shù)(平均每秒的數(shù)據(jù)量約為166)，觀察不同告警條數(shù)下鼠標(biāo)的移動、點擊、表格滾動在100次操作樣本下是否出現(xiàn)卡頓，滿分為100，出現(xiàn)卡頓1次將減1。優(yōu)化前后頁面操作流暢度對比如表1所示。

表1 優(yōu)化前后頁面操作流暢度對比表

圖4 優(yōu)化前后頁面操作流暢度對比折線圖

實驗結(jié)論：如圖4所示，在實驗環(huán)境一致的條件下，隨著告警量的增大，頁面操作（鼠標(biāo)移動、鼠標(biāo)點擊、表格滾動）流暢度逐漸降低。其中優(yōu)化前系統(tǒng)隨著告警量的增大，頁面操作出現(xiàn)輕微卡頓。優(yōu)化后系統(tǒng)隨著告警量的增大，卡頓越來越嚴重甚至不可用。在實驗環(huán)境一致的條件下，相同告警量優(yōu)化后系統(tǒng)頁面操作（鼠標(biāo)移動、鼠標(biāo)點擊、表格滾動）流暢度整體比優(yōu)化前系統(tǒng)高。

4.2 CPU占用率&內(nèi)存占用率

為了對比2套系統(tǒng)的性能，我們做了如下實驗。

正常操作優(yōu)化前系統(tǒng)與優(yōu)化后系統(tǒng)中相同的功能（首頁告警、系統(tǒng)管理、規(guī)則管理、告警查詢等功能），記錄運行30 min內(nèi)每1 min CPU與內(nèi)存的平均使用率。

實驗結(jié)論：如圖5所示，優(yōu)化前系統(tǒng)存在某個時間點CPU占用率會一直達到100%的最高點，并且CPU使用率落差比較大。而優(yōu)化后系統(tǒng)的CPU占用率分布在60%區(qū)間以下，也未出現(xiàn)CPU占用率落差比較大的情況。

圖5 CPU占有率優(yōu)化前后對比折線圖

實驗結(jié)論：如圖6所示，優(yōu)化前系統(tǒng)配置使用8G內(nèi)存，實際使用率在30%區(qū)間左右，內(nèi)存使用率分布較均勻。優(yōu)化后系統(tǒng)配置使用8G內(nèi)存，使用率分布在20%區(qū)間左右，內(nèi)存使用率分布均勻。新系統(tǒng)使用的內(nèi)存少于舊系統(tǒng)。

5 結(jié)束語

本文主要對基于Adobe Flex實現(xiàn)的監(jiān)控系統(tǒng)前臺采用HTML5重構(gòu)優(yōu)化前后的對比進行論述，介紹了RIA應(yīng)用開發(fā)相關(guān)技術(shù)，F(xiàn)lash、Flex以及HTML5，對比優(yōu)化前后技術(shù)差異，并且在保留現(xiàn)有主要功能的前提下控制前臺告警量對優(yōu)化前后性能進行實驗，優(yōu)化后系統(tǒng)整體上提高了頁面操作流暢度并且降低了運行時CPU占用率和內(nèi)存占用率。另優(yōu)化前系統(tǒng)中的添加視圖功能，可以拖動任意視圖在頁面上顯示，這是由于Flex的插件機制實現(xiàn)的功能，HTML5實現(xiàn)該功能存在困難，后續(xù)系統(tǒng)將會往這個方向進行優(yōu)化。