建站資深品牌
專(zhuān)業(yè)網(wǎng)站建設(shè)公司

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

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

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

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

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

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

（Facebook主頁(yè)的Pagelets，每個(gè)矩形對(duì)應(yīng)一個(gè)Pagelet。）

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

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

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

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

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

(Facebook主頁(yè)的延遲時(shí)間對(duì)比)

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