HTML5技術在移動互聯網中的應用

李 正 張欣宇 馮一帆

1 中國聯通研究院 北京 100032

2 北京中網華通設計咨詢有限公司 北京 100070

1 移動互聯網應用現狀

近三年來，我國移動互聯網用戶規模呈迅猛增長態勢，根據中國互聯網絡信息中心發布的統計數據[1]，截至2013年6月底，我國網民規模達5.91億，其中手機網民規模4.6億，占比78.5%，相比較2009年12月的調查結果，使用手機上網用戶規模增長98.7%。促成手機網民數量大規模增長的原因除了我國3G移動網絡的普及、無線網絡發展(包括公用和私有WiFi的發展)外，也得益于智能手機的大規模普及和手機應用的創新。

根據市場研究公司Gartner于2013年9月20日發布的數據，2013年全球移動應用下載量猛增至1 020億次，并將持續增長至2017年，屆時將達到2 690億次?？梢?，移動互聯網應為用戶的工作和生活所帶來的便利已深入人心。同時，對于移動互聯網應用的開發者來說，想要讓更多的用戶使用自己的應用，面對市場中種類繁多的移動終端，如何更加快速、有效地開發、維護應用程序便是關鍵的一環。

目前，移動互聯網應用的呈現形態主要分為移動Web應用和本地應用(Native App)兩大類。本地應用是指數據的運算和存儲均在本地(移動終端)操作系統上的應用，一般采用系統原生語言開發(如Android系統中使用Java，IOS系統中使用Object-C，Windows Phone中使用C#或C++等)。Web應用是指運行在Web引擎上的應用，一般采用網頁編程語言開發。

1.1 本地應用

本地應用的特點是運行效率高、能夠直接與終端硬件交互、實現豐富的人機交互方式。目前，在移動互聯網應用市場中，絕大多數應用都是本地應用，但隨著用戶和智能移動終端平臺種類的增加，本地應用發展所面臨的問題也逐漸擺在應用開發商的面前。

1) 跨平臺部署問題。當前主流移動智能終端系統有Android、IOS、BlackBerry OS、Windows Phone等，這些系統下的本地應用均無法運行在其它系統中，這意味著開發商要針對每一個移動平臺招聘不同的開發、維護人員，將使得開發成本激增。

2) 快速更新與發布控制。上述主流操作系統中，除Android系統外，應用的發布都要受到系統廠商的管理，應用開發商必須通過特定的應用商店(比如Windows Phone Apps+Games Store、IOS下的App Store)才能讓用戶得到自家開發的應用，這對開發商在開發應用的功能上做了限制，也降低了應用的發布速度。

3) 碎片化問題。碎片化問題在Android系統中表現的尤為明顯，由于其系統和硬件的開放性，市場中的Android設備屏幕尺寸、分辨率各異，再加上Android系統頻繁更新，小的設備廠商沒有實力快速加入新版本陣營中，使得碎片化日益嚴重。應用開發商要適配不同設備，使開發成本大幅增加，甚至導致了許多開發商放棄Android平臺[2]。

這三個問題是制約本地應用發展的主要原因，相比較而言，移動Web應用在這些方面有著明顯的優勢。

1.2 傳統移動Web應用

與本地應用相比，Web應用不直接依賴于終端系統的原生語言，而是直接在終端系統的Web引擎上運行，具有良好的跨平臺特性，面對移動智能終端的“碎片化”問題相比本地應用也有更好的表現。這一特性也使Web應用的分享、傳播變得極為方便，用戶只需要知道應用的地址鏈接便可訪問該應用，應用升級時開發商只需將升級后的應用部署到服務器上，用戶再次訪問時便可以使用最新的版本，因此，開發商可以自如地控制Web應用的發布可版本升級。

然而在HTML5技術出現之前，Web應用與本地應用之間有著不可逾越的障礙，從功能上可分為以下幾類問題。

1) 本地存儲。首先，相對傳統的應用,Web應用不需要安裝，所占空間小的特性使其具備傳統軟件應用所不具備的優勢，但由于缺少本地存儲數據的能力，在沒有網絡信號覆蓋的地方，Web應用也就無法正常使用；其次，每次訪問同一個Web應用時，都需要下載一次應用數據，其中包含大量重復數據，這會消耗大量帶寬和流量。

2) 設備硬件訪問。由于當前網絡標準的限制，使得Web應用很難訪問設備上的各種硬件，比如各重力感應傳感器、GPS、攝像頭等硬件。無法利用這些元件的硬件特性會極大地阻礙Web應用的創新，這是制約Web應用發展的重要原因。

3) 圖像繪制及渲染。想要直接在網頁上進行繪圖是不能輕易完成的，即使是幾何圖形也不可以。在瀏覽器當中只能對圖片做出點擊、保存等有限的交互操作。如果希望在網頁中對圖片做出更多操作或者畫出圖形，就需要借助 flash、silverlight這類插件來完成。

4) 多媒體播放。當前在Web應用中，大多數音視頻是通過插件(比如 Flash)來播放的，這對含有此類功能的Web應用帶來了跨平臺方面的困難，因為并非所有瀏覽器都支持同樣的插件(比如Safari瀏覽器就不支持flash插件)。

5) Web通信能力。當設計一個Web應用來展示實時的信息時(如股票信息、票務信息等)，通常是使用輪詢(Polling)、長輪詢(Long-Polling)或流(Streaming)等實時交互方式，這些方法在交互時都會用到HTTP的請求頭和響應頭，包含很多不必要的額外信息以至于增加了延遲，在對流量比較敏感的移動互聯網領域，這些包頭消耗的流量也是一筆不可忽視的開銷。

6) 腳本運行效率。眾所周知，瀏覽器在處理HTML頁面中的腳本時，當前頁面處于不可響應的狀態，如果頁面嵌入的腳本較多或腳本執行時間較長時，用戶是無法做其它操作的，因此，十分影響Web應用的用戶體驗。

2 HTML5技術

這些問題一直以來限制著移動Web應用的發展，使其完全無法和本地應用相抗衡，以至于出現了當前移動互聯網市場中本地應用為王的局面。直到HTML5技術的出現，HTML5在這些問題上做出了令人興奮的改進，促使Web應用急速發展，并受到越來越多開發者的關注。

2.1 HTML5概述

在HTML5推出之前，W3C推薦標準還是1999年發布的HTML4.01和2001年發布的XHTML1.1，十多年來，HTML一直沒有進行真正的升級，隨著互聯網應用的迅速發展，HTML4.01和XHTML1.1標準已力不從心，它們以文檔為中心的理念已無法滿足現代互聯網應用的需要，因此，開發人員要求升級的呼聲越來越高。2008年1月22日，HTML5的第一份正式草案發布，其目標便是取代HTML 4.01和XHTML 1.1標準，使網絡標準達到符合當代的網絡需求。

廣義論及HTML5時，實際指的是包括HTML5、CSS3和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對于需要插件的豐富網絡應用服務(plugin-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight和Oracle JavaFX的需求，并提供更多能有效增強網絡應用的標準集。

具體來說，HTML5添加了許多新的語法特征，其中包括