|
在客戶端在收到Pagelet通過“onPageletArrive”發(fā)出的指令，BigPipe的JavaScript庫將首先下載它的CSS資源；在CSS資源被下載完成后，BigPipe將在Pagelet的標(biāo)記HTML顯示它的innerHTML。多個Pagelets的CSS可在同一時間下載，它們可以根據(jù)其各自CSS的下載完成情況來確認(rèn)顯示順序。在BigPipe中，JavaScript資源的優(yōu)先級低于CSS和頁面內(nèi)容。因此，BigPipe不會在所有Pagelets顯示出來之前下載任何Pagelet中的JavaScript。然后，所有Pagelets的JavaScript異步下載。最后Pagelet的JavaScript初始化代碼根據(jù)其各自的下載完成情況來確定執(zhí)行順序。
這種高度并行系統(tǒng)的最終結(jié)果是，多個Pageletsr的不同執(zhí)行階段同時進(jìn)行。例如，瀏覽器可以正在下載三個Pagelets CSS的資源，同時已經(jīng)顯示另一Pagelet內(nèi)容，與此同時，服務(wù)器也在生成新的Pagelet。從用戶的角度來看，頁面是逐步呈現(xiàn)的。最開始的網(wǎng)頁內(nèi)容會更快的顯示，這大大減少了用戶的對頁面延時的感知。如果您要自己親眼看到區(qū)別，你可以嘗試以下連結(jié)： 傳統(tǒng)模式和BigPipe。第一個鏈接是傳統(tǒng)模式單一模式顯示頁面。第二個鏈接是BigPipe管道模式的頁面。如果您的瀏覽器版本比較老，網(wǎng)速也很慢，瀏覽器緩存不佳，哪么兩頁之間的加截時間差別將更加明顯。
性能測試結(jié)果
下圖是傳統(tǒng)模式和BigPipe性能數(shù)據(jù)比較圖，數(shù)據(jù)是75%用戶對一個頁面中最重要的內(nèi)容（例如：新聞動態(tài)被認(rèn)為是在Facebook主頁上最重要的內(nèi)容）的感知延遲時間。收集數(shù)據(jù)方式是加載Facebook主頁50次并且禁用瀏覽器緩存。該圖顯示BigPipe使用戶在大多數(shù)瀏覽器中感受到的延遲減少了一半。
(Facebook主頁的延遲時間對比)
值得一提的是BigPipe是從微處理器的流水線中得到啟發(fā)。然而，他們的流水線過程之間存在一些差異。例如，雖然大多數(shù)階段BigPipe只能操作一次Pagelet，但有時多個Pagelets的CSS和JavaScript下載卻可以同時運作，這類似于超標(biāo)量微處理器。BigPipe另一個重要區(qū)別是，我們實現(xiàn)了從并行編程引入的“障礙”概念，所有的Pagelets要完成一個特定階段，如多個Pagelet顯示區(qū)，它們都可以進(jìn)行進(jìn)一步JavaScript下載和執(zhí)行。
在Facebook，我們鼓勵創(chuàng)造性思考。我們不斷的嘗試創(chuàng)新技術(shù)，以使我們的網(wǎng)站更快。
作者蔣長浩目前是Facebook的研究科學(xué)家，他致力于研究使網(wǎng)站更快的各種創(chuàng)新。
（譯者還找到了幾篇關(guān)于BigPipe的文章，如果有興趣大家可以了解下：Facebook創(chuàng)新之BigPipe：優(yōu)化頁面加載時間、名站技術(shù)分析 — facebook奇特的頁面加載技術(shù)、Facebook讓網(wǎng)站速度提升一倍的BigPipe技術(shù)分析、Facebooks BigPipe Done in Java、Open BigPipe javascript implementation、Tutorial: Implementing Facebook’s BigPipe Using ASP.Net MVC、BigPipe Done in Node.js）
本文鏈接：http://m.95time.cn/tech/web/2010/8064.asp 
出處：isd
責(zé)任編輯：bluehearts
上一頁 BigPipe:高性能的"流水線技術(shù)"網(wǎng)頁 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 BigPipe:高性能的"流水線技術(shù)"網(wǎng)頁 [3]
