文檔簡介：
貼吧在進行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官方規範文檔：
隨着HTML5在移動領域的興起，通常將關於移動設備的本地設備訪問的規範也納入到HTML5規範的範疇裏：
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；其他瀏覽器（例如IE9、火狐、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/IE8、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、CSS3、視頻、音頻播放等。
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