BigPipe

BigPipe

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

基本介紹

  • 中文名:BigPipe
  • 性質:重新設計的基礎動態網頁服務體系
  • 標記生成:Web伺服器生成的回響的HTML標記
  • 數據獲取:Web伺服器從存儲層獲取數據
設計動機,性能測試結果,工作原理,生命周期,

設計動機

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

性能測試結果

下圖是傳統模式和BigPipe性能數據比較圖,數據是75%用戶對一個頁面中最重要的內容(例如:新聞動態被認為是在Facebook主頁上最重要的內容)的感知延遲時間。收集數據方式是載入Facebook主頁50次並且禁用瀏覽器快取。該圖顯示BigPipe使用戶在大多數瀏覽器中感受到的延遲減少了一半。
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代碼。
前三個階段執行,由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管道模式的頁面。如果您的瀏覽器版本比較老,網速也很慢,瀏覽器快取不佳,哪么兩頁之間的載入時間差別將更加明顯。

生命周期

在傳統的模式,用戶請求的生命周期如下:
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的網頁包含許多來源不同的數據資料:好友名單,好友動態,廣告等。在傳統的網頁呈現模式的用戶將不得不等到這些查詢數據都返回並生成最終檔案,然後將其傳送到用戶的電腦。任何一個查詢延遲都將拖慢整個最終檔案的生成。

相關詞條

熱門詞條

聯絡我們