基于HTML5的高性能移動門戶的技術研究

雷小虎 張捷

摘 ?要：目前隨著移動互聯網的發展，純原生移動應用由于系統平臺技術的差異性在重用性、開發周期、運行效率、用戶體驗、容錯能力、資源消耗性等方面存在較大的局限性。該研究課題旨在通過純H5+js構建高適應性的移動終端界面，對于應用界面所需的原生代碼則通過在移動門戶內集成的方式進行統一提供。移動門戶內的業務界面以war包方式在云端web服務器進行集群部署。

關鍵詞：原生代碼與H5展現界面分離 ?移動門戶運行組建庫 ?云端Web調用 ?外掛適配程序庫

中圖分類號：TP311 ? ? ? ? ?文獻標識碼：A 文章編號：1672-3791（2020）08（c）-0055-03

Abstract： At present， with the development of mobile Internet， due to the differences in system platform technology， pure native mobile applications have greater limitations in terms of reusability， development cycle， operating efficiency， user experience， fault tolerance， and resource consumption. This research topic aims to build a highly adaptable mobile terminal interface through pure H5+js. The native code required for the application interface is provided in a unified way through integration in the mobile portal. The business interface in the mobile portal is deployed in a cluster on the cloud web server in the form of a war package.

Key Words： Separation of native code and h5 presentation interface; Mobile portal running and building library; Cloud web calling; Plug-in adaptation library

根據國網公司信通部2018年10月全網調研數據顯示：內網移動應用總計198個，外網移動應用148個。總計346個移動應用涵蓋了國網公司移動作業、移動辦公。其中采用原生技術開發的占比超過60%，H5+原生混合應用占比為30%，僅有不到10%的應用采用了純H5+Js進行開發。由于參與建設的廠商眾多，技術壁壘明顯，后期支持團隊變動頻繁，造成大批應用在開發完成后基本得不到后續的技術支持，隨著相關業務的變化，一些應用成為無人使用的僵尸應用。

因此，國網公司目前迫切需要通過采用新的技術體系支撐未來即將進行建設的移動項目，消除由開發廠商帶來的技術特性和技術壁壘，保障應用后期的運維、升級換代，降低應用對終端設備性能的依賴，提升應用的響應速度和服用性。

1 ?系統概述

移動門戶為應用的唯一入口訪問渠道，移動門戶內核提供原生插件，由接入移動門戶的遠程微服務在運行時進行調用，遠程移動微服務集中部署于云端集群web服務器（見圖1）。

1.1 集群部署移動微應用

通過將由純H5+js開發的界面程序包打包成web服務器可運行的war包程序，并且部署于云服務中心的web服務器集群對移動微應用進行快速的部署。

1.2 統一應用商店

由統一應用商店對已經完成部署的移動微應用進行注冊、上架發布。注冊包括移動微應用的首頁路徑、服務器地址、應用名稱、應用桌面小圖標、應用簡介、關聯插件。注冊完畢后統一由應用商店對注冊內容進行發布，發布內容由移動門戶統一應用商店客戶端進行感知。

1.3 移動門戶運行內核支撐

（1）運行時標簽庫。移動門戶運行內核包含一套完整的H5自定義標簽庫，標簽庫中的每一個H5標簽對應一個原生、H5、外掛適配插件程序。

（2）原生運行組建庫。提供移動微應用運行時所需的原生代碼支撐，組件庫內按照代碼用途進行插件化的打包，插件的調用以H5自定義標簽形式在H5頁面進行調用。

（3）H5運行組件庫。采用H5+J5進行插件編寫，插件編寫完畢后加入運行內核標簽庫，供移動微應用運行時調用。

（4）外掛適配程序庫。外掛適配程序進行插件化封裝，封裝完畢后更新運行內核標簽庫，供移動微應用運行時調用。

2 ?系統建設步驟

2.1 界面包與原生代碼獨立開發

移動微應用開發階段，界面程序包建議采用國網公司統推移動開發平臺進行開發，界面所需的原生插件支持按照移動開發平臺的插件編寫規范和標簽定義規范進行編寫。

通過移動開發平臺集成的測試、開發環境測試界面的展現和原生插件調用功能。開發、測試完畢將界面程序包打包成能在Web容器中運行的war包程序。并且將插件包從移動開發平臺中獨立摘出。

2.2 移動微應用WAR包部署與插件上傳

移動微應用WAR包程序接入統一應用商店進行Web容器部署，關聯插件上傳至移動門戶后臺管理端，由移動門戶后臺對移動門戶內核進行后臺更新。

2.3 移動微應用門戶接入

用戶登錄移動門戶之后通過統一應用商店應用列表查找發布的移動微應用，點擊后在移動門戶桌面生成該移動微應用的圖標，此圖標包含該移動微應用的Web路徑。點擊此圖標即可訪問到移動微應用的首頁地址。

3 ?系統性能評測結果

3.1 對標項目簡介

（1）基于H5高性能移動門戶——四川電力微窗（內網）。四川省電力公司微窗項目于2018年11月建設完畢，該項目以H5作為核心技術，采用界面與插件代碼分離的方式進行開發、運行。

（2）基于原生開發的內網移動門戶——國網公司內網移動門戶（一期）。國網公司內網移動門戶是一款基于原生代碼開發的傳統移動門戶，門戶通過應用商店下載安裝原生應用進行運行。

3.2 運行環境配置

微應用運行環境為云服務中心所提供的標準Web容器，因此區別于傳統移動應用的運行環境。具體見表1。

3.3 運行對比數據

經過對比運行分析可知，微應用對于終端設備的資源消耗和性能依賴明顯小于傳統的移動應用，并且無論是應用啟動時間還是內存占用率都具有較大的優勢。具體見表2。

3.4 開發效率與成本分析

傳統原生應用開發過程繁瑣，需要特定技術的開發人員入場進行開發工作，但是H5開發人員來源廣泛，不需要專職人員進行開發，JAVA、C#、python人員皆可接手基于H5應用的開發工作。因此H5應用不存在技術壁壘的問題。

以四川省公司物資部貨架管理app為例，該應用第一版采用android原生技術進行開發，耗時4個月，投入成本70余萬。2018年該項目轉向H5技術升級，開發時間僅僅1個月不到便完成，投入成本不超過10萬。

4 ?結語

基于H5為技術核心的移動門戶以及移動微應用技術在國網公司的應用中，相比傳統的原生應用建設模式極大地縮短了應用開發周期，降低了開發成本、運維成本、技術門檻。提升了國網公司移動應用的運行效率和穩定性，為國網未來的移動應用建設指明了技術方向。

參考文獻

[1] 王平.基于移動終端的智慧城市信息服務平臺的實現[D].上海交通大學，2016.

[2] 寧士勇.移動分組網絡終端數據自適應整合方法仿真[J].計算機仿真，2018，35（2）：346-349.

[3] 詹雄，郭昊，等，陳紅松.國家電網邊緣計算信息系統安全風險評估方法研究[J].計算機科學，2019，46（S2）：428-432.

[4] 駱宇豪.基于SPA模式的高性能移動端可交互圖表系統的研究與實現[D].湖南大學，2016.

[5] 李桂林.HTML5在Web前端開發中的應用研究[J].計算機產品與流通，2020（8）：17.

[6] 李正君.HTML5新技術的應用設計與實現技巧探究[J].科技傳播，2020，12（6）：128-129.