面向移動終端的HTML5應(yīng)用運行環(huán)境研究*

陸 鋼，區(qū)洪輝，梁柏青，李蓉蓉

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

1 前言

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

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

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

2 移動Web應(yīng)用的現(xiàn)狀和發(fā)展

移動Web應(yīng)用大致經(jīng)歷了以下3個發(fā)展階段。

（1）網(wǎng)頁應(yīng)用階段

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

（2）Widget應(yīng)用階段

移動互聯(lián)網(wǎng)發(fā)展初期，考慮到開發(fā)本地應(yīng)用的復(fù)雜性以及瀏覽器的限制，設(shè)計了Widget引擎，擴展了對終端能力的調(diào)用，其應(yīng)用形態(tài)接近原生應(yīng)用，但后期由于標準不統(tǒng)一且產(chǎn)業(yè)鏈不成熟，同時受到操作系統(tǒng)原生應(yīng)用的沖擊，因此發(fā)展受限。

（3）HTML5應(yīng)用階段

隨著HTML5標準的發(fā)布以及產(chǎn)業(yè)鏈廠商的支持，移動Web應(yīng)用從目前的發(fā)展形態(tài)逐步過渡到HTML5應(yīng)用，其依托于HTML5應(yīng)用運行環(huán)境，應(yīng)用體驗接近原生應(yīng)用，目前是業(yè)界的發(fā)展熱點。

可以看到，移動Web應(yīng)用正在向支持HTML5標準的移動Web應(yīng)用形態(tài)發(fā)展，其形態(tài)由移動Web應(yīng)用運行環(huán)境決定，目前來看主要有以下幾種類型。

（1）基于支持HTML5瀏覽器的移動Web應(yīng)用

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

（2）內(nèi)嵌Web引擎的移動Web應(yīng)用

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

（3）基于操作系統(tǒng)Web引擎的混合類應(yīng)用

操作系統(tǒng)內(nèi)嵌移動Web應(yīng)用運行環(huán)境，操作系統(tǒng)廠商主推。此類應(yīng)用利用操作系統(tǒng)提供的Web接口，如Android的Web View對象，主要采用網(wǎng)頁編程語言，同時結(jié)合原生語言開發(fā)，無需依賴瀏覽器運行，應(yīng)用體驗和原生應(yīng)用基本一致。

（4）基于Web OS的應(yīng)用

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

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

3 HTML5應(yīng)用運行環(huán)境功能架構(gòu)設(shè)計

HTML5標準采用增量發(fā)展的策略，除去HTML5的基礎(chǔ)規(guī)范外，其他功能都單獨制定規(guī)范。整個HTML5體系結(jié)構(gòu)如圖1所示。

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

·結(jié)構(gòu)化的內(nèi)容模型和簡化的標簽；

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

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

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

圖1 整個HTML5體系結(jié)構(gòu)

·增強的網(wǎng)絡(luò)通信能力，提供全雙工、多線程的支持；

·設(shè)備API的提供，支持調(diào)用定位、文件、傳感器。

根據(jù)移動Web應(yīng)用形態(tài)需求，結(jié)合HTML5標準帶來的變化，設(shè)計了如圖2所示的HTML5應(yīng)用運行環(huán)境，運行環(huán)境主要包括以下三大功能層。

（1）HTML5應(yīng)用展現(xiàn)層

HTML5應(yīng)用運行環(huán)境的門戶，在移動終端上以應(yīng)用桌面或應(yīng)用管理器的形式呈現(xiàn)，是用戶發(fā)現(xiàn)、下載、管理HTML5應(yīng)用的入口，也是HTML5應(yīng)用運行環(huán)境的重要組成部分。

（2）HTML5引擎

HTML5應(yīng)用運行環(huán)境的核心，主要包括管理、內(nèi)核、終端能力、終端適配、運營商網(wǎng)絡(luò)能力等功能模塊，提供HTML5應(yīng)用的運行解析、邏輯處理、界面展現(xiàn)和用戶交互等功能。

（3）操作系統(tǒng)層

提供HTML5引擎運行所需的計算存儲能力，在Web OS應(yīng)用形態(tài)下，操作系統(tǒng)層需要具備HTML5引擎層提供的功能。

為了實現(xiàn)圖2所示的功能架構(gòu)，需要在現(xiàn)有移動Web應(yīng)用運行環(huán)境基礎(chǔ)上對應(yīng)用邏輯、圖形、網(wǎng)絡(luò)、音/視頻、數(shù)據(jù)存儲、本地資源、安全、插件等關(guān)鍵技術(shù)進行重點研發(fā)。

圖2 HTML5應(yīng)用運行環(huán)境功能架構(gòu)

4 HTML5應(yīng)用運行環(huán)境關(guān)鍵技術(shù)

對現(xiàn)有Web引擎或瀏覽器關(guān)鍵技術(shù)的改造實現(xiàn)要點如下。

（1）應(yīng)用邏輯能力模塊：支持HTML5的新增標簽、屬性和結(jié)構(gòu)以及對JavaScript性能的提升

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

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

互聯(lián)網(wǎng)業(yè)務(wù)或內(nèi)容的動態(tài)性和交互性，甚至視覺特效，都是由腳本語言完成的，使用最廣泛的是JavaScript。它是當(dāng)今互聯(lián)網(wǎng)業(yè)務(wù)的控制和數(shù)據(jù)處理中樞?；ヂ?lián)網(wǎng)內(nèi)容越復(fù)雜，其內(nèi)嵌的JavaScript腳本就越復(fù)雜，而對于解釋型的腳本語言，復(fù)雜的JavaScript腳本會影響互聯(lián)網(wǎng)業(yè)務(wù)的運行響應(yīng)速度，影響用戶體驗。因此，HTML5 JavaScript引擎的執(zhí)行效率已成為互聯(lián)網(wǎng)引擎的一大性能瓶頸，其技術(shù)有待提升。

（2）圖形、網(wǎng)絡(luò)、數(shù)據(jù)存儲、音視頻能力模塊：支持新標簽和接口

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

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

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

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

引擎需要支持新增的

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

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

（4）安全模塊：支持HTML5應(yīng)用的安全管理

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

（5）插件擴展技術(shù)：支持第三方插件

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

5 HTML5應(yīng)用運行環(huán)境實現(xiàn)方案

HTML5應(yīng)用運行環(huán)境根據(jù)形態(tài)的不同有多種實現(xiàn)方案，下面針對Android平臺探討兩種實現(xiàn)方案。

（1）擴展Web View組件為HTML5應(yīng)用運行環(huán)境

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

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

圖3 Web View組件擴展為HTML5應(yīng)用運行環(huán)境

（2）擴展Webkit為HTML5應(yīng)用運行環(huán)境

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

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

圖4 Webkit組件擴展為HTML5應(yīng)用運行環(huán)境

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

6 結(jié)束語

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

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

2 工業(yè)和信息化部通信行業(yè)職業(yè)技能鑒定指導(dǎo)中心，中國移動互聯(lián)網(wǎng)基地.移動應(yīng)用開發(fā)技術(shù).北京:機械工業(yè)出版社,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/