HTML5技術的調研以及貼吧應用總結

文檔簡介：

貼吧在進行HTML5技術應用的過程當中，進行了一系列的技術調研；本文對HTML5的技術調研進行總結，儘量客觀的分析解答對HTML5技術的一些疑問，給出產品、技術上的一些決策建議。

對於文中的內容以及表述，也熱切但願能獲得你們進一步的指正和交流。

1. HTML5的發展示狀及趨勢

1.1 HTML5簡介

HTML5是一套技術標準、規範，它定義了一系列的API編程接口和HTML規範（本文中將CSS3也默認涵蓋到HTML5的技術範疇）；HTML5的運用和推廣，須要依賴於各個瀏覽器廠商對HTML5的支持力度。

詳細介紹請參看百度百科：

http://baike.baidu.com/view/951383.htm

 

1.2 HTML5規範的發展示狀

HTML 5的第一份正式草案已於2008年1月22日公佈。HTML5的正式規範還未發佈，HTML5規範仍處於不斷髮展完善中，許多新技術特性仍在不斷的補充到HTML5的規範裏。

1.2.1 HTML5規範何時正式發佈？

HTML5規範的正式版的發佈時間還沒法肯定，也許2012，也許2014。可是不少瀏覽器廠商已經參考2008年的草案，不斷的在各自瀏覽器中對HTML5進行支持了。

有一些新特性，也每每是先由某些瀏覽器創新實現的，而後才被收錄到HTML5的工做小組收錄到HTML5規範裏。

也便是說，不須要等待HTML5規範的正式發佈，如今就可使用HTML5技術來豐富、優化產品功能和用戶體驗了。

HTML5官方規範文檔：

http://www.w3.org/TR/html5/

隨着HTML5在移動領域的興起，一般將關於移動設備的本地設備訪問的規範也歸入到HTML5規範的範疇裏：

http://www.w3.org/2009/dap/

1.2.2 HTML5規範與HTML4有什麼差異？

HTML5是在現有HTML4的規範基礎上，去除一些很差的特性，補充一些新的東西（例如：本地存儲、畫布Canvas、視頻、音頻支持等）。

詳細規範差別請參看文檔：

http://www.w3.org/TR/html5-diff/

http://fe.baidu.com/doc/tieba/tech/share/html5/topic/語義化/html5_tag_diff.html

1.2.3 HTML5有什麼優點？

HTML5的主要優點：增強了瀏覽器的能力，使web網頁程序能夠具有更強大的能力，能夠支持不少傳統web技術沒法實現的功能。

詳細請參考：

http://www.websbook.com/htmlcssdiv/HTML5dysyls_19043.html

1.3 HTML5的瀏覽器支持狀況

1.3.1 如今可使用HTML5了嗎？

在PC桌面端，在國內，IE6/IE7/IE8瀏覽器仍佔據約50%的市場佔有率，它們不支持HTML5；其餘瀏覽器（例如IE九、火狐、chrome、safari、opera等高級瀏覽器）則都已支持HTML5。

在無線端，android/iphone/webos/windowphone7等操做系統自帶的瀏覽器都已支持大部分的HTML5特性。

總之，在無線端，已經能夠在智能手機上較大範圍的開始使用HTML5技術了；而在PC端，則HTML5的使用還很受限，只能差異式的利用HTML5技術（例如：使用高端瀏覽器的用戶可以使用地理信息定位功能，而使用IE6瀏覽器的用戶則沒法使用）。

1.3.2 遨遊、360等外殼瀏覽器支持HTML5嗎？

對於搜狗、360、QQ、百度、遨遊這5類瀏覽器，一般都已經是雙內核的瀏覽器：

在極速（或高速）內核（webkit內核）模式下，是支持HTML5的；而在普通內核（IE內核）模式下則不支持HTML5。

1.3.3 PC桌面端的主流瀏覽器對HTML5的支持狀況

下表列出PC桌面端主流瀏覽器對HTML5的支持狀況，數據取自HTML5權威網站http://html5test.com:

第1列表明瀏覽器名稱，第2列表明瀏覽器版本，第3列表明得分（分數越高，表示對HTML5的支持狀況更好；得分在100如下的，能夠認爲其不支持HTML5）。

從上圖（取自2012年1月）可知：除了IE6/IE7/IE8以外的其餘瀏覽器都已支持HTML5；可是國內大部分普通網民仍在使用IE6/IE7/IE8瀏覽器。

因此，在PC端，HTML5在國內的大範圍推廣，仍不是短時間內能夠實現的；然而在國外，IE6的市場佔有率遠低於10%，HTML5在國外的應用比國內迅猛不少。

瀏覽器PC端的市場佔有率統計請參考：http://fe.baidu.com/~ua2

1.3.4 無線移動端的主流瀏覽器對HTML5的支持狀況

在無線移動領域，各主流智能機的瀏覽器都對HTML5進行了普遍的支持。

塞班系統的智能機對HTML5支持不好，但android/iphone則對HTML5支持得很好；同時，在國內分別佔據了10~20%市場佔有率的第3方瀏覽器（QQ手機瀏覽器和UC手機瀏覽器）的最新版本，也都已經開始支持HTML5（老版本的QQ和UC不支持HTML5）。

下表列出無線移動端主流瀏覽器對HTML5的支持狀況，數據（2012年1月）取自HTML5權威網站http://html5test.com:

1.4 HTML5的發展趨勢

1.4.1 HTML5的技術發展趨勢

HTML5技術目前在PC端發展迅猛，不少新特性新技術都是如今PC端涌現，而後發展到無線移動瀏覽器上。而反過來，無線移動設備上率先出現的一些特殊技術（例如操做各種傳感器），也會反過來刺激桌面端瀏覽器的不斷髮展。

下表列出無線移動設備上的主流瀏覽器對HTML5技術的詳細支持狀況：

http://fe.baidu.com/doc/tieba/tech/research/webapp/htmt5supportlist.JPG

從上表能夠看到，HTML5包含許多領域的一系列技術，綠色方塊的表明瀏覽器已實現支持，紅色方塊表明瀏覽器未支持。

無線移動端的瀏覽器的HTML5得分，大多在300分如下，而對於PC端來講，大多數主流的新型瀏覽器的得分都已經在300分以上了。

特別指出，chorme瀏覽器16版，已經得分達到374分，目前只剩下訪問攝像頭和微數據（搜索引擎支持）兩個特性未支持，其餘HTML5特性都已經獲得比較全面的支持。

也便是說：

首先，目前的HTML5規範範疇內的約80%（粗略估計）的技術，都已經獲得PC桌面端瀏覽器的支持。

其次，因爲移動互聯網的興起，一些與移動設備相關的規範也擴展到HTML5規範中，例如：手機通信錄、手機發短信、移動設備傳感器、震動、鈴聲提醒等；這些規範仍在發展中，目前大多數移動設備相關的規範還未被移動瀏覽器實現（目前只有地理信息定位技術受到了較普遍的瀏覽器廠商支持）。

總之，移動領域會是將來1~2年HTML5技術發展的一個很是重要的方向。

HTML5關於移動設備的相關規範請查看：http://www.w3.org/2009/dap/

1.4.2 HTML5的瀏覽器市場普及趨勢

在PC領域，HTML5的市場普及狀況，主要依賴於新型瀏覽器的市場佔有率，由於新型瀏覽器都已經支持或開始支持HTML5技術。

下表列出國內PC端瀏覽器市場分佈的佔比狀況：

（上表數據取自CNZZ公開的統計數據：http://www.cnbeta.com/articles/168045.htm）

將支持HTML5的瀏覽器進行彙總統計（不包括IE6/IE7/IE八、360安全瀏覽器），目前用戶PC上只有10%~20%的瀏覽器支持HTML5。

從目前的發展趨勢來看，支持HTML5技術的瀏覽器PC端市場佔比，預計在將來2年仍很難超過50%。由於國內約30%的用戶仍在使用IE6瀏覽器（而在美國，只有1%的用戶仍在使用IE6瀏覽器）；隨着windows7的普及，大多數國內低端用戶開始轉向使用windows7操做系統自帶的IE8瀏覽器，少部分用戶開始使用最新的IE9瀏覽器。

在無線移動端，android手機（其手機自帶瀏覽器支持HTML5）發展迅猛，且諾基亞轉投windowPhone7，這幾類智能手機（含ios,webOS系統的手機）的自帶瀏覽器也都支持HTML5；能夠認爲，除了諾基亞的塞班系統的智能手機不支持HTML5，其餘的絕大多數的智能手機都支持HTML5。能夠預計，將來1~2年內，HTML5將在無線移動領域獲得普遍的普及。

1.4.3 HTML5的產品應用的發展趨勢

在PC端，目前已有部分網站開始採用部分的HTML5技術，例如新浪微博的圖片瀏覽（canvas實現），網易郵箱的拖拽圖片上傳（HTML5的拖拽api）等。

進一步的介紹能夠參看調研文檔：http://fe.baidu.com/doc/tieba/tech/share/html5/topic/調研報告_業界html5應用.pptx

在PC端，目前一般只能經過差異式對待的方式來應用HTML5技術，從產品設計的角度，能夠將更豐富的產品功能或特性，提供給使用高端新型瀏覽器的用戶；對於使用低端瀏覽器的用戶則提供一些退化的替代功能或特性。將來1~2年，HTML5的技術應用在PC端仍可貴到較大範圍的推廣，由於要作到HTML5的瀏覽器差異式對待，是須要必定的技術開發、維護成本的。

在移動領域，HTML5的技術近期已經隨着移動web app的發展，開始在android/ios智能移動設備（手機和平版電腦）上獲得推廣使用。例如：百度iphone地圖map.baidu.com/mobile/（地理信息定位）、新浪微博m.weibo.cn（離線存儲等）、app.ft.com（本地存儲）等。

隨着國內塞班系統的市場份額的持續下滑，預計將來1~2年，在90%（粗略估計）的智能手機上均可以運用HTML5技術，並出現更多web app形式的移動互聯網產品。

關於移動web app，詳情請查閱調研文檔：

http://fe.baidu.com/doc/tieba/tech/research/webapp/貼吧web_app調研.docx

2 HTML5技術規範解析

2.1 已經發展較成熟的HTML5技術

HTML5規範中仍有一些技術規範還在不斷補充完善，有一些規範則已經較趨於穩定；

下表列出那些技術規範已經制定得較爲全面或者瀏覽器支持範圍已經較普遍的技術：

序號	名稱	移動瀏覽器支持	技術複雜度	備註
1	SVG(可縮放矢量圖形)	中	高
2	webapp cache(應用緩存)	高	低
3	Canvas(畫布)	高	高
4	Layout Element	高	低
5	History(訪問歷史、導航)	高	中
6	Geolocation(定位)	高	中
7	Cross-document messaging(跨文檔消息)	中	低
8	Session Storage(會話存儲)	高	低
9	LocalStorage(本地存儲)	高	低
10	Web SQL DB(本地SQL數據庫)	高	中
11	加速度	中	低

2.2 仍處於完善階段的HTML5技術

序號	名稱	技術複雜度	移動瀏覽器支持	備註
1	Video(視頻)	中	中
2	Audio(音頻)	中	中
3	MathML(數學標記語言)	低	中
4	Form(表單)	低	中
5	Drag and drop(拖拽)	中	低
6	HTML editing(富文本)	高	低
7	Security   （安全iframe/seamless）	低	中
8	WebGL(3D渲染)	高	低
9	Server-Sent Events(服務器端事件)	中	中	涉及與服務器端配合
10	WebSocket(網絡套接字)	高	低	涉及與服務器端配合
11	IndexedDB(本地索引數據庫)	中	低
12	Web/Share Workers(並行執行)	中	低
13	datalist,meter,progress元素	低	低	等待瀏覽器支持

2.3 仍發展較緩慢的HTML5技術

下表列出那些技術規範制定較粗糙或瀏覽器支持仍較滯後的技術：

序號	名稱	技術複雜度	移動瀏覽器支持	備註
1	Microdata(微數據)	低	無	提供搜索引擎優化
2	Files(文件讀寫)	中	低	涉及數據安全問題
3	訪問攝像頭	中	低
4	web Notifications   (web桌面消息提醒)	低	低
5	手機通信錄	中	無
6	收發短信	中	無
7	振鈴、震動	低	無

2.4 一些常常受關注的HTML5技術以及疑問

（1）       「聲音播放」、「錄音」、「語音識別爲漢字」是3個不一樣的功能特性：目前HTML5支持聲音播放，對於錄音的支持還很缺少，部分瀏覽器（例如chrome的pc版）支持語音識別爲漢字進行輸入。

（2）       HTML5支持視頻播放，但還不支持視頻錄製（這個功能仍需等待），對於視頻編輯功能，則更沒法支持。

（3）       手機通信錄，目前有讀取通信錄的HTML5規範，可是對於修改、編輯通信錄的API，則還未提供。還未有瀏覽器支持手機通信錄功能。

（4）       可否收發短信？

目前有發送短信的HTML5規範，可是仍未有瀏覽器支持。

固然，若是隻是想發短信，能夠不借助HTML5，而是考慮採用其餘的間接手段來實現，例如利用服務器端程序來幫助轉發短信。對於接收短信，目前HTML5規範裏沒有，也只能經過其餘間接手段來實現。

（5）       可否讀寫本地文件？

HTML5規範中有較詳細的讀取文件的API規範，對於「寫文件」的規範短時間內還很難等到。因爲安全和隱私的問題，瀏覽器的支持還很弱。利用javascript來編輯文件的內容，從編程角度看，是挺麻煩的一件事，尤爲是處理二進制文件。

（6）       本地緩存能存多少內容？

對於移動設備，本地存儲一般的存儲空間是5~10MB；用web本地數據庫時，能夠存50MB左右；也有一些瀏覽器是不作閥值限制的。

（7）       能夠訪問攝像頭嗎？

HTML5規範有，能夠調用攝像頭進行拍照、攝像，但目前尚未瀏覽器能夠支持。

（8）       能夠在瀏覽器端裁剪、縮放、旋轉、過濾圖片嗎？

能夠，利用canvas來編輯圖片。但目前還沒法直接利用javascript來保存圖片到瀏覽器本地，若是在編輯圖片以後，未能成功上傳圖片到服務器端（例如：網絡斷了），則這張圖片有必定的丟失風險。整體上來講，是技術可行的。

（9）       地理信息定位功能。

業界不少產品都已經有應用，再也不重複細說。

（10）   是否是HTML5不支持某個特性，這個特性就確定沒法實現？

固然不是，仍是具體問題具體分析比較合適。一些HTML5不支持的特性，也是有可能經過其它技術手段來間接實現的。

2.5 HTML5核心技術的調研和DEMO

請參看此處相關文檔，對HTML5技術進行了較豐富全面的梳理：

http://fe.baidu.com/doc/tieba/tech/share/html5/

3 HTML5對PC前端技術的影響

3.1 HTML5的技術難度

HTML5的技術範疇很廣，要全盤掌握是比較困難的事情。

有一些技術的API不少，文檔很厚，例如Canvas繪圖，能夠作得很精很深，也能夠簡單快速跟進，迅速作出產品。

有一些技術的API不多，例如地理信息定位和加速器的API，總共只有不超過10個API函數，這一類HTML5技術就比較易於上手。

再例如webGL，作3D動畫、遊戲，它就能夠很是複雜。

總之，快速的利用HTML5技術作出產品的原型DEMO，技術的難度倒不是太大；可是會比較繁瑣，由於業界成功案例相對較少、遇到問題時可供參考的資料較少，一般須要技術人員摸索前進。

3.2 HTML5產品的開發、維護成本

HTML5的技術難度自己並不大，困擾技術人員的每每是HTML5的一些瀏覽器兼容性問題。

在PC端，每每須要針對不一樣瀏覽器，開發徹底不一樣的兩套代碼，從而提供兩套功能和服務給用戶。

從產品的設計到產品的開發和維護，都須要額外增長很多投入，甚至是成倍的技術開發成本。

3.3 PC端使用HTML5，咱們須要作出哪些改變

首先，須要前端技術人員來引導產品設計人員，將更多的新技術的信息傳遞給產品設計人員；

其次，須要前端技術人員自身自發的主動作技術革新和推動。由於只有前端技術人員自身才更清楚的知道HTML5到底能作什麼。

最後，也是最重要的：「消滅IE6」。

4 HTML5對移動前端技術的影響

4.1 移動HTML5的技術難度

在移動領域，是HTML5最容易發力的領域，由於大多數的智能手機都支持HTML5。相比於PC端，移動領域須要面對更多的瀏覽器兼容性問題，這種兼容性問題主要集中在對各類手機上的不一樣瀏覽器，以及同一類型瀏覽器的不一樣版本上。

從技術難度來講，移動領域在下面幾方面，是加大了的：

1	瀏覽器種類繁多
2	屏幕尺寸、大小
3	橫屏、豎屏瀏覽模式
4	須要考慮節省網絡流量
5	各類類型的傳感器
6	減小複雜運算
7	省電
8	觸屏操做優化（多點觸控等）
9	動畫特效的性能優化

4.2 移動HTML5產品的開發、維護成本

移動前端的開發維護成本比傳統的站點要複雜，尤爲是後期的兼容性問題解決和展示調優，須要花費更多的成本：

1	測試需覆蓋更多類型的終端和瀏覽器版本。
2	問題追查、復現困難
3	網絡環境複雜，追查問題的干擾因素大
4	開發調試工具較簡陋、調試困難
5	遇到的瀏覽器兼容問題比較繁雜，每每業界無可供參考的資料

4.3 移動領域使用HTML5，咱們須要作出哪些改變

在移動領域使用HTML5，因爲技術還相對比較新，不少「坑」須要一個一個去試。

單純的作技術調研，每每容易浮於表面，更好的方式仍是隻能在實踐中去摸索。

而從移動web app來入手，就是一個很好的切入點。

關於移動web app的更多分析調研，請查看文檔：

http://fe.baidu.com/doc/tieba/tech/research/webapp/貼吧web_app調研.docx

4.4 主流移動領域的web app開發框架簡介

4.4.1 基礎庫

移動領域在業界經常使用的javascript基礎庫有jquery,zepto.js；對於dojo/YUI等，也都有相應的移動版本；百度有tangram mobile。

這些庫，每每只提供一些基本的API，對於開發完成一個web app，則還須要作更多額外的工做才行。例如，在基礎庫之上，一般還可能須要這樣的庫或框架：MVC框架、UI組件庫、前端模板引擎等。

Tangram mobile: http://fe.baidu.com/doc/ge/mobile/

Zepto.js(可能須要×××): http://zeptojs.com/

4.4.2 框架

移動領域有一些較爲成熟且功能全面的框架，例如：jqtouch, jquery mobile, sencha touch。運用這些框架，每每能夠方便、快速的搭建起一個web app應用，由於框架內部每每已經提供了不少UI組件、頁面跳轉控制、緩存策略的工具，甚至於集成了一些前端模板引擎和MVC框架。

主流移動框架的介紹：

Jqtouch: http://www.oschina.net/p/jqtouch

jquery mobile: http://jquerymobile.com/

sencha touch: http://baike.baidu.com/view/3800552.htm

前端模板引擎調研文檔：

http://fe.baidu.com/doc/fis/template_front/front-template-research.text

MVC框架：

Backbone: http://documentcloud.github.com/backbone/

4.4.3 框架調研分析

調研文檔：

zepto和jquery在手機上面執行效率對比：

http://fe.baidu.com/doc/tieba/tech/share/wise/zepto_VS_jquery.html

Sencha 與 jqurey mobile框架的簡單對比分析：

http://fe.baidu.com/doc/tieba/tech/share/wise/sencha_vs_jqmobile.html

4.4.4 移動web開發框架發展示狀

最近兩年（2011,2012），移動web開發隨着web app的逐漸興起，獲得了較大的發展，但仍處於發展階段，大部分框架還未徹底成熟（很多框架處於beta版，或近期半年纔剛發佈了正式版的狀態），還有較大的成長、發展空間。

5 貼吧運用HTML5的方式和建議

5.1 貼吧PC端的HTML5運用

（1）       目前線上貼吧已經運用的HTML5技術有：本地存儲（發貼草稿）、語義化佈局標籤、Canvas繪圖塗鴉。

（2）       能夠考慮進一步運用的HTML5技術有：拖拽、本地圖片編輯上傳、ipad支持video標籤視頻播放、CSS3（圓角、動畫等）。

5.2 貼吧移動端的HTML5運用

（1）       目前線上移動貼吧已經運用的HTML5技術：canvas，CSS3動畫、圓角。

（2）       能夠考慮進一步運用的HTML5技術有：本地存儲、離線存儲、canvas、CSS三、視頻、音頻播放等。

5.3 貼吧對待HTML5技術的方式

5.3.1 PC端的HTML5運用

由於須要考慮差異式的產品設計，兼容性問題處理成本、難度會較大，建議後續PC端的開展方式是：針對某個具體技術點，從產品應用的某個具體功能出發，進行專門的設計和優化，從而來運用HTML5技術。例如：拖拽圖片上傳、ipad下的mp4格式的視頻播放。

5.3.2 無線移動端的HTML5運用

由於移動設備（智能手機）每每能夠較好的支持HTML5，同時能夠藉助HTML5來設計、實現用戶體驗較優秀的web app，HTML5在無線移動領域的應用場景比較普遍，建議無線移動端的後續開展方式是：

（1）首先，以web app的設計、優化爲中心，將已經可普遍使用的HTML5通用技術（例如本地存儲、history的api、CSS3動畫等）直接運用到web app中；

（2）其次，再考慮針對產品的具體功能特性增長特殊的定製化HTML5特性（例如一些手機設備訪問的API、地理信息定位、攝像頭等）。

（3）Hybrid app的應用也是HTML5的一個重要發展方向。須要較多篇幅，在本文暫不展開討論。

phonegap目前是開發混合式應用較成熟的主流框架之一，進一步瞭解能夠查看：http://www.phonegap.cn/

 

5.3.3 對HTML5的技術跟進方式

在無線移動端進行具體的應用實踐，積累實踐經驗；經過無線端的HTML5技術應用，來帶動貼吧在HTML5方面的技術進展，同步推進、擴展PC端的HTML5的產品應用思路。

通過一系列的調研，貼吧對HTML5技術的全貌已經有了較清晰的瞭解；後續的工做，主要是須要解決一些實際應用中的特定場景下的特殊問題。這些問題須要在實踐中來解決，單純的調研是很難作得很深刻的。

5.4 一些能夠繼續深刻開展的工做

（1）       創建瀏覽器統計平臺，更細緻的瞭解瀏覽器佔比狀況（含手機類型、瀏覽器種類和版本等）。

目標：將更多支持HTML5技術的手機適配到貼吧的移動智能版貼吧上。

（2）       創建瀏覽器對HTML5的能力檢測平臺，瞭解各款具體瀏覽器對HTML5的支持狀況。

目標：更好的設計、優化產品，利用HTML5來改善產品功能和品質。

（3）       創建HTML5的一些javascript基礎庫，封裝一些更友好的API供產品線使用。

目標：下降HTML5的技術使用成本。

（4）       完善web app的框架設計、開發調試工具支持。

（5）       在特定複雜技術領域繼續深化調研：web socket, webGL, canvas, web worker等。

（6）       Web app的hybrid app形式。

這會是無線上一個很是重要的領域，hybrid app可以實如今客戶端對HTML5技術進行加強支持，同時能兼顧本地native app和web app的一些實際應用需求。

by yangzuncheng