複製鏈接
請複製以下鏈接發送給好友

BigPipe

鎖定
BigPipe是一個重新設計的基礎動態網頁服務體系。大體思路是,分解網頁成叫做Pagelets的小塊,然後通過Web服務器和瀏覽器建立管道並管理他們在不同階段的運行。這是類似於大多數現代微處理器的流水線執行過程:多重指令管線通過不同的處理器執行單元,以達到性能的最佳。雖然BigPipe是對現有的服務網絡基礎過程的重新設計,但它卻不需要改變現有的網絡瀏覽器或服務器,它完全使用PHPJavaScript來實現。
中文名
BigPipe
性    質
重新設計的基礎動態網頁服務體系
標記生成
Web服務器生成的響應的HTML標記
數據獲取
Web服務器從存儲層獲取數據

BigPipe設計動機

為了更好的瞭解BigPipe,我們需要了解一下現有的動態Web服務系統,它的歷史可以追溯到萬維網的初期,但與初期相比卻並沒有多少改變。網站有着遠遠高於以前的動態效果和互動性,但傳統的網頁系統早已無法跟上互聯網速度的要求。

BigPipe性能測試結果

圖1是傳統模式和BigPipe性能數據比較圖,數據是75%用户對一個頁面中最重要的內容(例如:新聞動態被認為是在Facebook主頁上最重要的內容)的感知延遲時間。收集數據方式是加載Facebook主頁50次並且禁用瀏覽器緩存。圖1顯示BigPipe使用户在大多數瀏覽器中感受到的延遲減少了一半。
圖1 圖1

BigPipe工作原理

要利用該Web服務器和瀏覽器之間的並行性,BigPipe首先分解網頁成多個可調用的Pagelets。正如流水線微處理器劃分一個指令的生命週期為(如“取指令”,“指令解碼”,“執行”,“寫回寄存器”等)多個階段,BigPipe的頁面生成過程分為以下幾個階段:
1. 請求解析:Web服務器解析和完整性檢查的HTTP請求。
2. 數據獲取:Web服務器從存儲層獲取數據。
3. 標記生成:Web服務器生成的響應的HTML標記。
4. 網絡傳輸:響應從Web服務器傳送到瀏覽器。
5. CSS的下載:瀏覽器下載網頁的CSS的要求。
6. DOM樹結構和CSS樣式:瀏覽器構造的DOM文檔樹,然後應用它的CSS規則。
7. JavaScript中下載:瀏覽器下載網頁中JavaScript引用的資源。
8. JavaScript執行:瀏覽器的網頁執行JavaScript代碼。 [1] 
前三個階段執行,由Web服務器,最後四個階段是由瀏覽器執行。每個Pagelet必須經過所有這些階段順序,但BigPipe在不同的階段使幾個Pagelets同時執行。
在BigPipe,一個用户請求的生命週期是這樣的:在瀏覽器發送一個HTTP請求到Web服務器。在收到的HTTP請求,並在上面進行一些全面的檢查,網站服務器立即發回一個未關閉的HTML文件,其中包括一個HTML 標籤和標籤的開始標籤。標籤包括BigPipe的JavaScript庫來解析Pagelet以後收到的答覆。在標籤,有一個模板,它指定了頁面的邏輯結構和Pagelets佔位符。
在客户端在收到Pagelet通過“onPageletArrive”發出的指令,BigPipe的JavaScript庫將首先下載它的CSS資源;在CSS資源被下載完成後,BigPipe將在Pagelet的標記HTML顯示它的innerHTML。多個Pagelets的CSS可在同一時間下載,它們可以根據其各自CSS的下載完成情況來確認顯示順序。在BigPipe中,JavaScript資源的優先級低於CSS和頁面內容。因此,BigPipe不會在所有Pagelets顯示出來之前下載任何Pagelet中的JavaScript。然後,所有Pagelets的JavaScript異步下載。最後Pagelet的JavaScript初始化代碼根據其各自的下載完成情況來確定執行順序。
這種高度並行系統的最終結果是,多個Pageletsr的不同執行階段同時進行。例如,瀏覽器可以正在下載三個Pagelets CSS的資源,同時已經顯示另一Pagelet內容,與此同時,服務器也在生成新的Pagelet。從用户的角度來看,頁面是逐步呈現的。最開始的網頁內容會更快的顯示,這大大減少了用户的對頁面延時的感知。如果您要自己親眼看到區別,你可以嘗試以下連結: 傳統模式和BigPipe。第一個鏈接是傳統模式單一模式顯示頁面。第二個鏈接是BigPipe管道模式的頁面。如果您的瀏覽器版本比較老,網速也很慢,瀏覽器緩存不佳,哪麼兩頁之間的加載時間差別將更加明顯。

BigPipe生命週期

在傳統的模式,用户請求的生命週期如下:
1. 瀏覽器發送一個HTTP請求Web服務器
2. Web服務器解析請求,然後讀取數據存儲層,制定一個HTML文件,並用一個HTTP響應把它發送到客户端。
3. HTTP響應通過互聯網傳送到瀏覽器。
4. 瀏覽器解析Web服務器的響應,使用HTML文件構建了一個的DOM樹,並且下載引用的CSS和JavaScript文件。
5. CSS資源下載後,瀏覽器解析它們,並將它們應用到DOM樹。
6. JavaScript資源下載後,瀏覽器解析並執行它們。
傳統模式在現代網站中效率是非常低下的,因為很多系統的操作順序,不能互相重疊。一些如延時加載JavaScript、並行下載等優化技術已被網絡社區廣泛採用,以此來克服的一些限制。然而,這些優化卻很少涉及Web服務器和瀏覽器的執行順序造成的瓶頸。當Web服務器正忙生成一個頁面,瀏覽器處於閒置狀態,浪費其週期無所事事。當Web服務器完成生成頁面,並將其發送到瀏覽器,瀏覽器則成為性能瓶頸並且Web服務器對其無從幫助。重疊Web服務器的生成時間與瀏覽器的渲染時間,我們不僅可以減少最終的時間延遲,也能使網頁更早顯示用户可見區域給用户,從而大大減少用户對延遲的感知。
Web服務器的產生時間和瀏覽器的渲染時間重疊,是特別有用的,如Facebook這樣內容豐富的網站。一個典型的Facebook的網頁包含許多來源不同的數據資料:好友名單,好友動態,廣告等。在傳統的網頁呈現模式的用户將不得不等到這些查詢數據都返回並生成最終文件,然後將其發送到用户的電腦。任何一個查詢延遲都將拖慢整個最終文件的生成。
參考資料