王淮：HTML5的明天，局部有小雨
前言：現(xiàn)在 HTML5 技術(shù)很熱，那么作為開發(fā)者，你的產(chǎn)品是否可以趕個(gè)潮流，可以用 HTML5 來做呢？Facebook 前研發(fā)經(jīng)理王淮（weibo）在博客上發(fā)表了一篇文章，專門為開發(fā)者們考慮了這個(gè)問題。HTML5 的確很有魅力，但它并不是萬靈丹，如果你是 Web 端，那么就是一片晴天，如果是在手機(jī)端，那么可能會(huì)有小雨。本文由作者授權(quán)發(fā)表，TECH2IPO 二次編輯。
HTML5 是什么？為什么很多人如此關(guān)注它并押上公司的未來？但為什么 Facebook 棄 HTML5 轉(zhuǎn) Objective C？ HTML5 的明天, 是晴還是雨，你該不該給它投懷送抱，該如何去判斷？
我最近對(duì) HTML5 產(chǎn)生興趣，就做了一些粗淺的研究，并和硅谷的兩位玩弄 HTML5 多年的大佬 Luke Shepard（原 Facebook 移動(dòng)平臺(tái)研發(fā)經(jīng)理）和 Feng Qian（Facebook 高級(jí)工程師, 原 Google Chrome 的創(chuàng)始團(tuán)隊(duì)成員）電話交流，總結(jié)于此篇文章。這篇文章不是 HTML5 的啟蒙貼，是對(duì)其在業(yè)界發(fā)展的一個(gè)觀察和思考吧。
什么是 HTML5？
HTML5，就像其名字所表示的，它是 HTML 的第五個(gè)版本。它將現(xiàn)在大家在各種瀏覽器之中所做的很多很炫的插件或者特殊調(diào)準(zhǔn)都做到了標(biāo)準(zhǔn)之中。這樣的好處在于，大家不需要對(duì)于特殊的瀏覽器做特殊的優(yōu)化，也可以避免了很多由于插件標(biāo)準(zhǔn)不統(tǒng)一帶來的困擾。
比如, 我很驚訝的了解到，Adobe 的 Flash+PDF 插件導(dǎo)致的瀏覽器崩潰，占到所有瀏覽器崩潰次數(shù)的一半以上。
HTML5 的出現(xiàn)和推廣，將通過統(tǒng)一的標(biāo)準(zhǔn)大大改觀這種混亂的局面。最最主要的原生支持(native support)，是這幾種：
-
Draw on the fly (隨意拖動(dòng)部件)；
-
Native video support (原聲的視頻支持 – bye, Flash)；
-
Geolocation (地址信息的獲取)；
-
Offline access support (不在線的支持, 支持 local storage)；
-
Semantics with tags that makes SEO friendly (flash content is not indexable – SEO能理解的 tags 來幫助搜索引擎的加索引)
但對(duì)于 HTML5 標(biāo)準(zhǔn)實(shí)現(xiàn)的程度和節(jié)奏完全取決于不同瀏覽器的自主選擇，它想咋的就咋地。html5readiness.com 上的這張圖（下圖所示）很清楚的總結(jié)了不同瀏覽器對(duì)于不同功能的實(shí)現(xiàn)程度。
你該不該給 HTML5 投懷送抱？
回答這個(gè)問題，要分成兩步。
你在 Web 端還是移動(dòng)端？
| 如果是 Web 端，100% 保證晴天；如果是移動(dòng)端，看下一條。 |
對(duì)于 Web 端而言，HTML5 將是一個(gè)完整的操作系統(tǒng)。它在不同的底層系統(tǒng)之上，借助于瀏覽器的實(shí)現(xiàn)，封裝了統(tǒng)一標(biāo)準(zhǔn)的 API 允許開發(fā)的程序跨設(shè)備(PC or Mac or Smart Phone)，跨平臺(tái)(Windows、MacOS、iOS、Android，what so ever)的運(yùn)行。
***的好處，就是一處開發(fā)，多處使用。審核新版本的發(fā)布也不用看蘋果爺爺?shù)哪樕?，直接在服?wù)器端推送新代碼就好了。對(duì)于開發(fā)人員而言，這對(duì)效率的提高，有著致命的誘惑。像“你們是先開發(fā) Web, 還是移動(dòng)？”之類的問題，將愉快的失去意義。
對(duì)于 Web 端的開發(fā)而言，你可以盡情的享受 HTML5 這種統(tǒng)一封裝帶來的好處，唯一要等待的就是瀏覽器對(duì)其支持的完善。但這種完善的到來, 無疑是確定的。
而正是這種好處，讓很多創(chuàng)業(yè)者如此關(guān)注它并押上公司的未來。
但對(duì)于移動(dòng)端而言，卻沒有那么簡(jiǎn)單純粹。
如果是移動(dòng)端，取決于你的產(chǎn)品形態(tài)。因?yàn)槟愕漠a(chǎn)品需要的功能可能永遠(yuǎn)也無法在移動(dòng)端的瀏覽器的 HTML5 實(shí)現(xiàn)中被很好的實(shí)現(xiàn)。
“App Store 上超過 50% 的應(yīng)用已經(jīng)是用 HTML5 來開發(fā)，將來可能 90% 的應(yīng)用會(huì)是 HTML5，而那 10%，可能永遠(yuǎn)也不適合 HTML5。”
HTML5 的天氣預(yù)報(bào)中，是局部有小雨。
苦逼的開發(fā)者們，你站的地是晴天還是下雨，該如何判斷呢？
先介紹一個(gè)工具，動(dòng)態(tài)檢測(cè)瀏覽器對(duì)HTML支持程度的 ringmark.io（該網(wǎng)站不僅可以測(cè)試你當(dāng)前的瀏覽器，你也可以在右下角的“Choose a different device”當(dāng)中選擇不同的移動(dòng)端的操作系統(tǒng)版本來看看它們對(duì)于HTML5的支持程度）。如下圖所示，它將測(cè)試你當(dāng)前的瀏覽器，將 HTML5 的規(guī)格 (spec) 當(dāng)中描述的功能的實(shí)現(xiàn)程度會(huì)一一測(cè)試出來。不同的 ring (環(huán))代表了不同的功能等級(jí)。已經(jīng)實(shí)現(xiàn)的為綠色，沒實(shí)現(xiàn)的是灰色。發(fā)現(xiàn)灰色很多的朋友，要換瀏覽器啰。
回到剛開始的那個(gè)問題，F(xiàn)acebook 為什么在 iOS App 的實(shí)現(xiàn)上棄 HTML5 選 Objective C ，就在于 Facebook App 重度依賴照片，而照片分享、瀏覽相關(guān)的功能極度依賴 CSS Overflow Scrolling ，這一點(diǎn), iOS 上的瀏覽器支持極度不給力。而換成 Objective C 的Native Implementation 之后，速度快上了2倍之多。
好，有朋友可能會(huì)問，可能在將來瀏覽器對(duì)這些功能的支持會(huì)得到改善呢？那時(shí)候不就可以了。
事實(shí)是，那一天可能永遠(yuǎn)也不會(huì)到來。
因?yàn)闉g覽器的編程模型還是90年代流行的單進(jìn)程單線程 (single process single thread)，但原生實(shí)現(xiàn)(比如用 Objective C )的 APP 可以用多線程。這一點(diǎn)帶來的作用是致命的。
移動(dòng)端編寫 APP，可以使用多個(gè)線程，***個(gè)線程，被稱作主線程 (main thread)，編程的***原則是 Don’t do heavy work on main thread。通常只讓它處理 UI 事件等，其他重度的工作讓其他背景線程來做。
但瀏覽器只有一個(gè)線程，所有的事情都是它干，瀏覽器編程一上來就破了***原則。
在臺(tái)式機(jī)上，瀏覽器編程還沒有太多問題，因?yàn)閴蚩?。但在移?dòng)端，這個(gè)弊端很明顯。
我來舉個(gè)例子，比如你在用瀏覽器看朋友的照片，你發(fā)的評(píng)論被發(fā)到服務(wù)器端，此時(shí)你接著用手指往下拉屏；此時(shí)，服務(wù)器端返回信息，評(píng)論發(fā)布成功，瀏覽器中唯一的線程可能停止處理屏幕滾動(dòng) (scrolling) 而來處理服務(wù)器的返回信息，由于移動(dòng)設(shè)備的處理器（尤其單進(jìn)程瀏覽器只能用上單核，即使是多核手機(jī)）和內(nèi)存（處于省電原因使用低耗電的 DDR1, 這一點(diǎn)和現(xiàn)在 PC 使用的 DDR3 相差甚遠(yuǎn)）的不給力，完全可能造成滾動(dòng)處理的不連續(xù)。通常手機(jī)的刷新率是 60MHZ，即每一幀不超過 15ms；如果處理的延時(shí)大大超過 15ms，那么就會(huì)出現(xiàn)跳幀，肉眼就能看出來。
這是交互操作（比如拉動(dòng)，滾動(dòng)等）很多的App，如果是由 HTML5 實(shí)現(xiàn)，出現(xiàn)拉動(dòng)的時(shí)候停在那里一個(gè)很重要的原因。
所以，如果你的 App 是相對(duì)靜態(tài)的，不需要很多對(duì)于照片，多點(diǎn)觸摸，多向拉動(dòng)的處理，那完全可以用 HTML5 來實(shí)現(xiàn)；如果不是，比如信息流的展示，游戲等等，還是乖乖的用原生的去實(shí)現(xiàn)。
具體的查看哪種類型的 App 需要哪些功能, 可以參考進(jìn)入 ringmark.io , 點(diǎn)開 ring1, 點(diǎn)擊“See how features apply to each type of App”，可以看到這個(gè)工具對(duì)于不同的 App 的類型做出的總結(jié). 比如, 對(duì)于照片功能比較重的 App(Camera App), 你會(huì)發(fā)現(xiàn)他們需要什么樣的功能, 如果灰色（代表當(dāng)前瀏覽器沒實(shí)現(xiàn)）太多的話, 你的 App 將不適合在這種瀏覽器中運(yùn)行。
HTML5 究竟在等什么？
HTML5 實(shí)現(xiàn)已經(jīng)是 50% 以上的 iOS App 的選擇。我相信處理能力的提升。將讓移動(dòng)設(shè)備的處理不給力帶來的體驗(yàn)底下得到改善。而這種處理能力的提高，很大程度上將取決于低耗電高性能 CPU /內(nèi)存的出現(xiàn)，或者電池技術(shù)的極大改善。
在這一天到來之前，有可能 10% 的 App 無法應(yīng)用 HTML5 來實(shí)現(xiàn)。
