不久前，Sencha創(chuàng)建了Fastbook，這是一個模仿Facebook原生應(yīng)用的HTML5應(yīng)用，在iOS與Android上的性能表現(xiàn)差不多，Sencha借此想要證明“HTML5現(xiàn)已就緒”。
Facebook CEO Mark Zuckerberg幾個月前曾經(jīng)說過“公司最大的失誤就是在HTML5上投入太多，因為HTML5尚未就緒”，公司決定為iOS與Android創(chuàng)建原生應(yīng)用，后者在一周前已經(jīng)發(fā)布。常見的說法是HTML5尚未“就緒”、速度不夠快、由于缺少合適的工具導(dǎo)致開發(fā)起來困難重重。
來自Sencha（創(chuàng)建了HTML5及工具的知名公司）的兩位開發(fā)者決定證明HTML5已經(jīng)就緒，并通過幾個月的業(yè)余時間創(chuàng)建了Fastbook。Fastbook是個HTML5應(yīng)用，模仿了Facebook的原生應(yīng)用，通過Facebook API進行真實的FB數(shù)據(jù)訪問（你應(yīng)該在移動設(shè)備上使用該應(yīng)用，在桌面瀏覽器中似乎不行）。
下面的視頻展示了在iOS/iPhone 4S與Android/Galaxy Nexus上對原生Facebook應(yīng)用與Fastbook進行的測試。令人驚訝的是，在加載動態(tài)新聞并滾動新聞時，HTML5應(yīng)用的性能與FB原生應(yīng)用 一樣好，在幾處甚至還超越了FB應(yīng)用（也許需要翻墻才能觀看視頻——譯者注）：
在不同視圖間切換時，HTML5應(yīng)用會緩存數(shù)據(jù)。FB原生應(yīng)用則會重新加載動態(tài)新聞Fastbook使用了嵌套的無限列表來展示評論，這提供了更棒的用戶體驗Fastbook還提供了landscape布局在Android/Galaxy Nexus上，HTML5應(yīng)用加載數(shù)據(jù)的速度要快于原生Facebook應(yīng)用Fastbook創(chuàng)建者認為如果使用“網(wǎng)站開發(fā)方式”并且沒有使用“正確的應(yīng)用開發(fā)工具”的話，那么HTML5應(yīng)用的表現(xiàn)就會很差勁。
他們還發(fā)現(xiàn)Facebook的原生應(yīng)用至少有兩處大的瑕疵：
它依然是個混合應(yīng)用：“News Feed已經(jīng)被移到了本地，并且擁有設(shè)定頁面，但很多其他應(yīng)用UI只是簡單地向m.facebook.com發(fā)送HTTP GET請求而已。現(xiàn)在的原生Facebook應(yīng)用是個混合Web/原生應(yīng)用：既有在m.facebook.com上渲染并在UIWebView上顯示的內(nèi) 容，也有原生的Objective-C組件”。它所傳輸?shù)臄?shù)據(jù)超過了自身的需要，每10個條目就需要傳輸15KB到20KB的gzip壓縮JSON數(shù)據(jù)，這其中很多數(shù)據(jù)并不是渲染實際視圖所需要的。在代理服務(wù)器上清除FB數(shù)據(jù)后，Sencha團隊將數(shù)據(jù)傳輸量減少了90%。為了讓示例能夠成功運行起來，Sencha對其Touch框架進行了幾處改進：
為擁有未知數(shù)量條目的頁面添加了一個新的Infinite List組件。該列表包含了少量DOM結(jié)點，可以重用以渲染前一個/下一個條目。這有助于減少內(nèi)存使用量，并且會極大降低大頁面的渲染時間。添加了一個新的Sandbox Container，“以編程的方式拆分復(fù)雜視圖并將其渲染到自己的iframe中，這會將DOM樹分割開來”。這么做的好處在于，動態(tài)新聞顯示會更快，因為News Feed、Timeline與Story視圖現(xiàn)在可以使用不同的容器了。與現(xiàn)有Task Queue更好的集成，這可以“防止對DOM讀寫的交叉，消除了不必要的布局。這與新的沙箱技術(shù)的結(jié)合能夠極大減少復(fù)雜視圖代價高昂的布局，比如說Timeline與News Feed”。添加了一個新的AnimationQueue類，它會將耗時的任務(wù)推遲到CPU空閑時執(zhí)行。這對滾動很有幫助：當(dāng)用戶快速滾動動態(tài)新聞時，圖像加載與渲染會暫停，直到滾動停下來為止，這是一種推薦做法。Fastbook使用了WebWorkers，它可以在單獨的線程而不是UI線程中獲取數(shù)據(jù)，使得滾動更加平滑。如果說去年夏天HTML5還不行的話，那么Sencha的這個示例就表明了現(xiàn)在的HTML5可以與原生應(yīng)用一樣快，這證明了HTML5現(xiàn)已“就緒”，即便對于Facebook這種大型Web應(yīng)用來說亦是如此。
Sencha還發(fā)起了HTML5 Is Ready，這是一個應(yīng)用競賽，提供了$20,000獎金和設(shè)備，為的就是證明“優(yōu)秀的開發(fā)者配上優(yōu)秀的HTML5工具是可以開發(fā)出驚艷的應(yīng)用的”。
新聞熱點
疑難解答
