面向移動終端的HTML5應用運行環境研究*

陸 鋼，區洪輝，梁柏青，李蓉蓉

（1.中國電信股份有限公司廣東研究院 廣州510630；2.中國電信股份有限公司廣東分公司 廣州510081）

1 前言

移動智能終端應用形態主要分為移動Web應用和本地應用兩類，移動Web應用是指運行在移動Web引擎上的應用，一般采用網頁語言開發，本地應用是指運行在移動終端操作系統上的應用，一般采用Java、C等原生語言開發。比較而言，移動Web應用通過Web引擎調用終端能力，具有開發簡單、跨平臺適配等優點，目前由于Web引擎能力的限制，更多適用于一些游戲、閱讀等信息類、內容類應用；而本地應用能夠直接調用終端能力，具有交互方式豐富、運行效率高等優點，其應用范圍更廣。長期以來，移動Web應用作為本地應用的重要補充形態，由于其開發門檻低，受到廣大草根開發者的歡迎。

當前移動互聯網的最新趨勢就是HTML5所引發的技術變革，Strategy Analytics分析師表示：“預計全球支持HTML5的手機將由2011年的3 360萬部增長為2013年的10億部”。該增長主要由北美、歐洲和亞洲的硬件供應商和軟件開發者所推動，他們希望在多種平臺上開發富媒體業務，包括像Adobe、蘋果、谷歌和微軟這樣的公司。應用開發商Appcelerator和市場調研機構IDC聯合發布了新的移動行業趨勢季度報告，其數據顯示，移動開發者對HTML5的興趣大幅提高。

可以看到，HTML5豐富了Web應用的多媒體呈現能力、交互能力、云端服務集成能力與本地處理能力，降低了移動互聯網應用的開發門檻，對移動設備的本地應用形成了巨大的挑戰。由于具備良好的用戶體驗、豐富的多媒體內容、優異的跨平臺和跨終端等特性，基于HTML5的移動Web應用正在成為下一代移動互聯網應用的主流趨勢。而HTML5應用運行環境作為移動Web應用的重要載體，在產業生態鏈中具有核心位置，其技術先進性和產品成熟度決定了移動Web應用未來的發展前景。

2 移動Web應用的現狀和發展

移動Web應用大致經歷了以下3個發展階段。

（1）網頁應用階段

基于瀏覽器運行的網頁小程序，采用JavaScript編寫或需要瀏覽器插件支持，由于需要依賴瀏覽器能力并且需要下載插件，應用體驗不佳，因此只是作為網頁的補充，并沒有形成較大的產業規模。

（2）Widget應用階段

移動互聯網發展初期，考慮到開發本地應用的復雜性以及瀏覽器的限制，設計了Widget引擎，擴展了對終端能力的調用，其應用形態接近原生應用，但后期由于標準不統一且產業鏈不成熟，同時受到操作系統原生應用的沖擊，因此發展受限。

（3）HTML5應用階段

隨著HTML5標準的發布以及產業鏈廠商的支持，移動Web應用從目前的發展形態逐步過渡到HTML5應用，其依托于HTML5應用運行環境，應用體驗接近原生應用，目前是業界的發展熱點。

可以看到，移動Web應用正在向支持HTML5標準的移動Web應用形態發展，其形態由移動Web應用運行環境決定，目前來看主要有以下幾種類型。

（1）基于支持HTML5瀏覽器的移動Web應用

瀏覽器作為移動Web應用運行環境，瀏覽器廠商主推。目前如Chrome、Opera、UC等都推出了支持HTML5標準的瀏覽器，并且發布了基于瀏覽器的應用商店，已經可以支持移動Web應用的下載和運行。

（2）內嵌Web引擎的移動Web應用

客戶端作為移動Web應用運行環境，應用開發商主推。此類應用一般采用客戶端內嵌Web引擎擴展的方式，客戶端上可以運行一個或多個移動Web應用，應用體驗和原生應用基本一致，現階段的一些企業信息化應用以及定制Web桌面都采用了此種方式。

（3）基于操作系統Web引擎的混合類應用

操作系統內嵌移動Web應用運行環境，操作系統廠商主推。此類應用利用操作系統提供的Web接口，如Android的Web View對象，主要采用網頁編程語言，同時結合原生語言開發，無需依賴瀏覽器運行，應用體驗和原生應用基本一致。

（4）基于Web OS的應用

操作系統就是移動Web應用運行環境，下一代網頁操作系統廠商主推。其是移動Web應用發展的終極階段，操作系統可以支持或者只支持網頁類應用開發方式，如阿里云手機、Firefox OS都采用了這種方式。

以上幾種方式目前來看都還處于探索和發展階段，究竟哪種方式會成為主流還有待觀望，但可以肯定的是，基于HTML5的移動Web應用已經成為業界的發展方向，以上幾種方式的移動Web應用運行環境都在向HTML5應用運行環境演進。

3 HTML5應用運行環境功能架構設計

HTML5標準采用增量發展的策略，除去HTML5的基礎規范外，其他功能都單獨制定規范。整個HTML5體系結構如圖1所示。

研究圖1中的標準可以看到，HTML5帶來的變化主要體現在以下幾個方面：

·結構化的內容模型和簡化的標簽；

·智能表單，提供日歷、郵件等模板開發；

·對離線存儲有更好的支持；

·增強的多媒體能力和原生的音/視頻支持，如canvas、audio、video；

圖1 整個HTML5體系結構

·增強的網絡通信能力，提供全雙工、多線程的支持；

·設備API的提供，支持調用定位、文件、傳感器。

根據移動Web應用形態需求，結合HTML5標準帶來的變化，設計了如圖2所示的HTML5應用運行環境，運行環境主要包括以下三大功能層。

（1）HTML5應用展現層

HTML5應用運行環境的門戶，在移動終端上以應用桌面或應用管理器的形式呈現，是用戶發現、下載、管理HTML5應用的入口，也是HTML5應用運行環境的重要組成部分。

（2）HTML5引擎

HTML5應用運行環境的核心，主要包括管理、內核、終端能力、終端適配、運營商網絡能力等功能模塊，提供HTML5應用的運行解析、邏輯處理、界面展現和用戶交互等功能。

（3）操作系統層

提供HTML5引擎運行所需的計算存儲能力，在Web OS應用形態下，操作系統層需要具備HTML5引擎層提供的功能。

為了實現圖2所示的功能架構，需要在現有移動Web應用運行環境基礎上對應用邏輯、圖形、網絡、音/視頻、數據存儲、本地資源、安全、插件等關鍵技術進行重點研發。

圖2 HTML5應用運行環境功能架構

4 HTML5應用運行環境關鍵技術

對現有Web引擎或瀏覽器關鍵技術的改造實現要點如下。

（1）應用邏輯能力模塊：支持HTML5的新增標簽、屬性和結構以及對JavaScript性能的提升

Web內核布局渲染引擎的核心是一棵稱為Render樹的結構。它的核心作用是提供一個通用的規劃頁面布局和渲染機制，利用它不僅可以繪制HTML頁面，也可以繪制SVG頁面，甚至其他格式的頁面。Render樹與DOM（文檔對象模型）樹相互關聯，相互補充。Render樹是對DOM樹的更進一步描述，主要與布局渲染等CSS相關屬性（如width、height、color、font）有 關，用 于 描 述DOM樹 的 布 局 渲染特性。HTML5標準要求可以通過理解和定制布局渲染引擎達到提升用戶體驗的效果，提供布局排版的靈活性改進，能夠根據終端屏幕大小，自適應調整頁面內容的布局效果，避免滾動區域過大、渲染特效增強，結合合適的圖形引擎，增強視覺效果。可以認為，HTML5應用運行環境的核心功能是以DOM樹和Render樹為核心的功能強大、擴展性良好的通用渲染機。

DOM是整個Web內核的基礎，它遵從W3C的DOM Level1、Level2和Level3標準實現并進行的自擴展?；ヂ摼W內容的解析、布局、下載和數據交互都是通過DOM完成的。它包括頁面節點管理和事件分發兩大技術：Web內核對 解 析 標 簽 語 言 （HTML、SVG、XML、CSS）的 設 計 符 合HTML DOM、SVG DOM、XML DOM和CSS DOM，實現了DOM方式的節點管理，采用樹狀結構管理頁面的元素和屬性節點，為JavaScript腳本動態操作控制頁面元素提供方法；事件的分發處理模型，它是實現動態交互的方法，事件模型遵從于W3C DOM Event標準，將事件的分發處理分為捕捉、處理和冒泡3個階段。在基于DOM節點的管理框架下，使得Web內核擴展對標簽語言的支持更加便利。

互聯網業務或內容的動態性和交互性，甚至視覺特效，都是由腳本語言完成的，使用最廣泛的是JavaScript。它是當今互聯網業務的控制和數據處理中樞?；ヂ摼W內容越復雜，其內嵌的JavaScript腳本就越復雜，而對于解釋型的腳本語言，復雜的JavaScript腳本會影響互聯網業務的運行響應速度，影響用戶體驗。因此，HTML5 JavaScript引擎的執行效率已成為互聯網引擎的一大性能瓶頸，其技術有待提升。

（2）圖形、網絡、數據存儲、音視頻能力模塊：支持新標簽和接口

引擎需要支持canvas應用編程接口（canvas application programming interface）提供的數十種方法或函數來繪制線條、弧線以及矩形，用樣式和顏色來填充區域，書寫樣式化文本，操作圖像和視頻以及其他有趣的活動。

引擎需要支持Web GL，使程序員可以直接在網頁上展示物體的3D形象，并且這種展現直接使用設備的圖形處理器的處理能力，其繪圖性能能夠得到保證。

引擎需要支持Web Socket接口，支持頁面使用Web Socket協議與遠程主機進行全雙工的通信。支持HTML5 Web Notification技術，為開發者提供一種可以跨越沙盒的通知（API），可以使用戶無論在瀏覽什么網頁，甚至在瀏覽器最小化的狀態下，都可以收到來自Web應用的桌面通知。

引擎需要支持Web Storage、Indexed DB和Application Cache 3種存儲方式，提供相關的機制和開放接口。

引擎需要支持新增的

（3）本地資源模塊：定位、文件、音/視頻等設備API或標簽遵循HTML5的標準

引擎的另一個關鍵技術是對JavaScript引擎的擴展。對于類似Widget的業務基于標準JavaScript衍生擴展了一批新的JavaScript功能接口，需要在JavaScript引擎中進行功能擴展以及與Web內核中的其他模塊建立交互流程?？刹捎猛獠孔越涌陬惙绞?，也可以采用設計新的類接口在代碼級中擴展的方式。擴展部分包括對W3C規范要求的device、multiMedia、telephony、PIM、messaging、applauncher、ui、filesystem、gallery、status、appconfig、geolocation、camera、commlog、pim等類接口的支持。

（4）安全模塊：支持HTML5應用的安全管理

HTML5標準帶來了引擎能力的提升，同時也帶來了一系列的安全隱患，如HTML5隱私竊取、HTML5跨站腳本攻擊、HTML5應用釣魚等。對隱私竊取可以采用監控HTML5接口、接管HTML5接口的用戶隱私授權功能、監控HTML5接口的本地存儲的讀取行為等方式增強安全功能；對跨站腳本攻擊可采用審計瀏覽器所訪問的URL、對截獲的URL進行分析、分析HTTP請求所返回的內容等方式進行防范；對釣魚行為可采用開啟HTML5 iframe沙箱，在非信任網站的網頁中所有的iframe網頁都是不安全的，在iframe沙箱中的網頁將強制禁止執行動態腳本，禁止提交表單的方式。開啟HTML5 iframe沙箱后保護iframe沙箱內的網站不被釣魚網頁用作點擊劫持和拖放劫持攻擊，能夠保護用戶免受新型HTML5網頁的釣魚攻擊。安全是一個系統功能，需要終端引擎配合后臺服務器完成以上功能。

（5）插件擴展技術：支持第三方插件

Web內核采用插件機制，用來實現利用第三方程序庫擴展外部功能的方法，如文檔閱讀器、Java小程序、媒體播放器等。Web內核插件機制將遵循NPAPI（netscape plugin application programming interface）標準，提供一組規定的API支持NP插件。

5 HTML5應用運行環境實現方案

HTML5應用運行環境根據形態的不同有多種實現方案，下面針對Android平臺探討兩種實現方案。

（1）擴展Web View組件為HTML5應用運行環境

Android平臺對Web應用開發者提供了Web View對象封裝Web應用開發接口，由于Web View組件提供給上層Web應用的API能力有限，所以需要對其進行擴展來完成一些應用的構建。當前一些移動中間件 （如PhoneGap）已經對一些基本功能做了擴展，但終端資源能力支持得并不好，所以需要進行擴展。如果移動應用需要擴展基于Web View的移動應用SDK，可以借鑒PhoneGap的功能擴展模式（擴展插件形式）或者在PhoneGap的基礎上進行一定的擴展，增添更多的功能。

如圖3所示，擴展Web View組件后的移動中間件與PhoneGap的工作原理十分類似，開發人員使用該移動中間件時，全部使用Web技術即可完成移動終端應用的開發。與PhoneGap不同的是，需要擴充一些運營商特有的業務（Java代碼實現）。

圖3 Web View組件擴展為HTML5應用運行環境

（2）擴展Webkit為HTML5應用運行環境

Android操作系統內置Web引擎是基于Webkit這一開源內核進行開發，考慮到基于Web View對象開發還存在局限，因此深度定制的HTML5應用運行環境可采用開源Webkit內核開發擴展。Webkit包括基本的Web Core排版引擎和JavaScript Core引擎，并且還在不斷地按照HTML5標準進行增量開發。

如圖4所示，需要對Web Core模塊和JavaScript Core模板按照第4節中提到的關鍵技術進行定制開發，以支持HTML5的新特性，并提升運行環境的性能。

圖4 Webkit組件擴展為HTML5應用運行環境

比較而言，第一種方案開發難度較低，可以擴展JavaScript API支持補充設備、網絡或資源API能力，但無法涉及Web應用運行環境核心功能，并存在一些功能和性能上的瓶頸；而第二種方案開發難度較大，需要涉及Webkit核心代碼的修改，但是定制化程度高，可以為HTML5應用提供更加完善的運行環境。

6 結束語

按照W3C構想，HTML5標準制定工作將于2014年完成，隨著其產業環境的不斷成熟，可以看到在未來1～2年時間內，HTML5應用市場將有一個井噴式的增長。在傳統移動互聯網應用市場，蘋果（依托iOS）和Google（依托Android系統）占據了壟斷地位，而目前HTML5技術的出現，將使移動互聯網應用市場面臨著一次重新洗牌的機會。移動終端HTML5應用運行環境在移動Web應用產業鏈中的地位猶如操作系統在原生應用中的位置，其核心價值不言而喻，因此目前各大廠商都在這一領域依托自身優勢積極謀略，希望構建HTML5應用產業鏈。如文中指出，現階段移動終端HTML5應用運行環境還存在性能和功能上的局限，標準也在完善過程中，因此有必要加大對這一領域的研發工作，推進我國移動互聯網產業發展。

1 李慧云，何震葦，李麗等.HTML5技術與應用模式研究.電信科學,2012,28(4)

2 工業和信息化部通信行業職業技能鑒定指導中心，中國移動互聯網基地.移動應用開發技術.北京:機械工業出版社,2011

3 Damon O,Sebastien B.Pro Android Web Apps∶Develop for Android Using HTML5,CSS 3&JavaScript.Berkeley∶Apress,2010

4 W3School.HTML 5參考手冊.http://www.w3school.com.cn/html5/