Facebook的網(wǎng)站速度做為最關鍵的公司任務之一。在2009年，我們成功地實現(xiàn)了Facebook網(wǎng)站速度提升兩倍 。而正是我們的工程師團隊的幾個關鍵的創(chuàng)新使它成為可能。在本文中，我將向大家介紹我們的秘密武器之一，我們稱之為BigPipe的偉大底層技術。

　　BigPipe是一個重新設計的基礎動態(tài)網(wǎng)頁服務體系。大體思路是，分解網(wǎng)頁成叫做Pagelets的小塊，然后通過Web服務器和瀏覽器建立管道并管理他們在不同階段的運行。這是類似于大多數(shù)現(xiàn)代微處理器的流水線執(zhí)行過程：多重指令管線通過不同的處理器執(zhí)行單元，以達到性能的最佳。雖然BigPipe是對現(xiàn)有的服務網(wǎng)絡基礎過程的重新設計，但它卻不需要改變現(xiàn)有的網(wǎng)絡瀏覽器或服務器，它完全使用php和JavaScript來實現(xiàn)。

　　動機

　　為了更好的了解BigPipe，我們需要了解一下現(xiàn)有的動態(tài)Web服務系統(tǒng)，它的歷史可以追溯到萬維網(wǎng)的初期，但現(xiàn)在與初期相比卻并沒有多少改變。現(xiàn)代網(wǎng)站有著遠遠高于10年前的動態(tài)效果和互動性，但傳統(tǒng)的網(wǎng)頁服務系統(tǒng)早已無法跟上當今互聯(lián)網(wǎng)速度的要求。在傳統(tǒng)的模式，用戶請求的生命周期如下：

1. 瀏覽器發(fā)送一個HTTP請求到Web服務器。
2. Web服務器解析請求，然后讀取數(shù)據(jù)存儲層，制定一個HTML文件，并用一個HTTP響應把它發(fā)送到客戶端。
3. HTTP響應通過互聯(lián)網(wǎng)傳送到瀏覽器。
4. 瀏覽器解析Web服務器的響應，使用HTML文件構建了一個的DOM樹，并且下載引用的CSS和JavaScript文件。
5. CSS資源下載后，瀏覽器解析它們，并將它們應用到DOM樹。
6. JavaScript資源下載后，瀏覽器解析并執(zhí)行它們。

　　傳統(tǒng)模式在現(xiàn)代網(wǎng)站中效率是非常低下的，因為很多系統(tǒng)的操作順序，不能互相重疊。一些如延時加載JavaScript、并行下載等優(yōu)化技術已被網(wǎng)絡社區(qū)廣泛采用，以此來克服的一些限制。然而，這些優(yōu)化卻很少涉及Web服務器和瀏覽器的執(zhí)行順序造成的瓶頸。當Web服務器正忙生成一個頁面，瀏覽器處于閑置狀態(tài)，浪費其周期無所事事。當Web服務器完成生成頁面，并將其發(fā)送到瀏覽器，瀏覽器則成為性能瓶頸并且Web服務器對其無從幫助。重疊Web服務器的生成時間與瀏覽器的渲染時間，我們不僅可以減少最終的時間延遲，也能使網(wǎng)頁更早顯示用戶可見區(qū)域給用戶，從而大大減少用戶對延遲的感知。

　　Web服務器的產生時間和瀏覽器的渲染時間重疊，是特別有用的，如Facebook這樣內容豐富的網(wǎng)站。一個典型的Facebook的網(wǎng)頁包含許多來源不同的數(shù)據(jù)資料：好友名單，好友動態(tài)，廣告等。在傳統(tǒng)的網(wǎng)頁呈現(xiàn)模式的用戶將不得不等到這些查詢數(shù)據(jù)都返回并生成最終文件，然后將其發(fā)送到用戶的電腦。任何一個查詢延遲都將拖慢整個最終文件的生成。

　　BigPipe如何工作

　　要利用該Web服務器和瀏覽器之間的并行性，BigPipe首先分解網(wǎng)頁成多個可調用的Pagelets。正如流水線微處理器劃分一個指令的生命周期為（如取指令，指令解碼，執(zhí)行，寫回寄存器等）多個階段，BigPipe的頁面生成過程分為以下幾個階段：

1. 請求解析：Web服務器解析和完整性檢查的HTTP請求。
2. 數(shù)據(jù)獲取：Web服務器從存儲層獲取數(shù)據(jù)。
3. 標記生成：Web服務器生成的響應的HTML標記。
4. 網(wǎng)絡傳輸：響應從Web服務器傳送到瀏覽器。
5. CSS的下載：瀏覽器下載網(wǎng)頁的CSS的要求。
6. DOM樹結構和CSS樣式：瀏覽器構造的DOM文檔樹，然后應用它的CSS規(guī)則。
7. JavaScript中下載：瀏覽器下載網(wǎng)頁中JavaScript引用的資源。
8. JavaScript執(zhí)行：瀏覽器的網(wǎng)頁執(zhí)行JavaScript代碼。

　　前三個階段執(zhí)行，由Web服務器，最后四個階段是由瀏覽器執(zhí)行。每個Pagelet必須經(jīng)過所有這些階段順序，但BigPipe在不同的階段使幾個Pagelets同時執(zhí)行。

（Facebook主頁的Pagelets，每個矩形對應一個Pagelet。）

　　上面的圖片使用Facebook主頁為例子來說明如何將網(wǎng)頁是分解成Pagelets。該主頁包括幾個Pagelets：作者Pagelet，導航Pagelet，新聞動態(tài)Pagelet，請求框Pagelet，廣告pagelet，朋友推薦和聯(lián)系等他們是相互獨立的。當導航Pagelet顯示給用戶，新聞動態(tài)Pagelet仍然可以在服務器上正在生成。

　　在BigPipe，一個用戶請求的生命周期是這樣的：在瀏覽器發(fā)送一個HTTP請求到Web服務器。在收到的HTTP請求，并在上面進行一些全面的檢查，網(wǎng)站服務器立即發(fā)回一個未關閉的HTML文件，其中包括一個HTML 標簽和標簽的開始標簽。標簽包括BigPipe的JavaScript庫來解析Pagelet以后收到的答復。在標簽，有一個模板，它指定了頁面的邏輯結構和Pagelets占位符。例如:

　　渲染后的第一個反應到客戶端，Web服務器繼續(xù)一個接一個生成Pagelets只要一個Pagelet生成，他將立即刷新到客戶端在一個JSON編碼的對象，包括所有的CSS，JavaScript的pagelet，它的HTML內容，以及一些元數(shù)據(jù)所需的資源。例如:

　　在客戶端在收到Pagelet通過onPageletArrive發(fā)出的指令，BigPipe的JavaScript庫將首先下載它的CSS資源；在CSS資源被下載完成后，BigPipe將在Pagelet的標記HTML顯示它的innerHTML。多個Pagelets的CSS可在同一時間下載，它們可以根據(jù)其各自CSS的下載完成情況來確認顯示順序。在BigPipe中，JavaScript資源的優(yōu)先級低于CSS和頁面內容。因此，BigPipe不會在所有Pagelets顯示出來之前下載任何Pagelet中的JavaScript。然后，所有Pagelets的JavaScript異步下載。最后Pagelet的JavaScript初始化代碼根據(jù)其各自的下載完成情況來確定執(zhí)行順序。

　　這種高度并行系統(tǒng)的最終結果是，多個Pageletsr的不同執(zhí)行階段同時進行。例如，瀏覽器可以正在下載三個Pagelets CSS的資源，同時已經(jīng)顯示另一Pagelet內容，與此同時，服務器也在生成新的Pagelet。從用戶的角度來看，頁面是逐步呈現(xiàn)的。最開始的網(wǎng)頁內容會更快的顯示，這大大減少了用戶的對頁面延時的感知。如果您要自己親眼看到區(qū)別，你可以嘗試以下鏈接： 傳統(tǒng)模式和BigPipe。第一個鏈接是傳統(tǒng)模式單一模式顯示頁面。第二個鏈接是BigPipe管道模式的頁面。如果您的瀏覽器版本比較老，網(wǎng)速也很慢，瀏覽器緩存不佳，哪么兩頁之間的加截時間差別將更加明顯。

　　性能測試結果

　　下圖是傳統(tǒng)模式和BigPipe性能數(shù)據(jù)比較圖，數(shù)據(jù)是75%用戶對一個頁面中最重要的內容（例如：新聞動態(tài)被認為是在Facebook主頁上最重要的內容）的感知延遲時間。收集數(shù)據(jù)方式是加載Facebook主頁50次并且禁用瀏覽器緩存。該圖顯示BigPipe使用戶在大多數(shù)瀏覽器中感受到的延遲減少了一半。

(Facebook主頁的延遲時間對比)

　　值得一提的是BigPipe是從微處理器的流水線中得到啟發(fā)。然而，他們的流水線過程之間存在一些差異。例如，雖然大多數(shù)階段BigPipe只能操作一次Pagelet，但有時多個Pagelets的CSS和JavaScript下載卻可以同時運作，這類似于超標量微處理器。BigPipe另一個重要區(qū)別是，我們實現(xiàn)了從并行編程引入的障礙概念，所有的Pagelets要完成一個特定階段，如多個Pagelet顯示區(qū)，它們都可以進行進一步JavaScript下載和執(zhí)行。

　　在Facebook，我們鼓勵創(chuàng)造性思考。我們不斷的嘗試創(chuàng)新技術，以使我們的網(wǎng)站更快。　　

it知識庫：BigPipe：高性能的“流水線技術”網(wǎng)頁，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。