《使網(wǎng)站更快的創(chuàng)新技術(shù) BigPipe》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233OR013.htm

性能測試結(jié)果

要應(yīng)用該Web服務(wù)器和瀏覽器之間的并行性，BigPipe首先分解網(wǎng)頁成多個可調(diào)用的Pagelets。正如流水線微處置器劃分一個指令的性命周期為（如“取指令”，“指令解碼”，“執(zhí)行”，“寫回存放器”等）多個階段,使用不帶單位的line-height，BigPipe的頁面生成進程分為以下幾個階段：

作者蔣長浩目前是Facebook的研究迷信家,使用margin居中常見問題，他致力于研討使網(wǎng)站更快的各種翻新。

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

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

值得一提的是BigPipe是從微處理器的流水線中得到啟示,使用CSS自動隱藏網(wǎng)頁文字的技巧。然而，他們的流水線過程之間存在一些差別。例如，雖然大多數(shù)階段BigPipe只能操作一次Pagelet，但有時多個Pagelets的CSS和JavaScript下載卻可以同時運作，這類似于超標量微處理器。BigPipe另一個主要差別是，我們實現(xiàn)了從并行編程引入的“阻礙”概念，所有的Pagelets要完成一個特定階段，如多個Pagelet顯示區(qū)，它們都可以進前進一步JavaScript下載和執(zhí)行。

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

 

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

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

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

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

BigPipe如何工作

在Facebook，我們激勵發(fā)明性思考。我們一直的嘗試創(chuàng)新技術(shù)，以使我們的網(wǎng)站更快。

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

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

Facebook的網(wǎng)站速度做為最癥結(jié)的公司義務(wù)之一。在2009年，我們勝利地實現(xiàn)了Facebook網(wǎng)站速度晉升兩倍 ,使用CSS定位頁面的“footer”。而恰是我們的工程師團隊的幾個要害的立異使它成為可能。在本文中，我將向大家先容我們的機密兵器之一，我們稱之為BigPipe的巨大底層技術(shù)。

瀏覽器發(fā)送一個HTTP請求到Web服務(wù)器。 Web服務(wù)器解析要求，然后讀取數(shù)據(jù)存儲層，制訂一個HTML文件,使用CSS定位的網(wǎng)頁footer，并用一個HTTP響應(yīng)把它發(fā)送到客戶端。 HTTP響應(yīng)通過互聯(lián)網(wǎng)傳遞到瀏覽器。 瀏覽器解析Web服務(wù)器的響應(yīng)，使用HTML文件構(gòu)建了一個的DOM樹，并且下載援用的CSS和JavaScript文件。 CSS資源下載后，瀏覽器解析它們，并將它們利用到DOM樹。 JavaScript資源下載后，瀏覽器解析并執(zhí)行它們。

Tag：BigPipe     BigPipe     請求解析：Web服務(wù)器解析和完全性檢查的HTTP請求。 數(shù)據(jù)獲�。篧eb服務(wù)器從存儲層獲取數(shù)據(jù)。 標記生成：Web服務(wù)器生成的響應(yīng)的HTML標志。 網(wǎng)絡(luò)傳輸：響應(yīng)從Web服務(wù)器傳送到瀏覽器。 CSS的下載：瀏覽器下載網(wǎng)頁的CSS的要求。 DOM樹結(jié)構(gòu)和CSS款式：瀏覽器結(jié)構(gòu)的DOM文檔樹，然后運用它的CSS規(guī)矩,使用CSS如何實現(xiàn)自動換行和強制不換行。 JavaScript中下載：瀏覽器下載網(wǎng)頁中JavaScript引用的資源。 JavaScript執(zhí)行：瀏覽器的網(wǎng)頁執(zhí)行JavaScript代碼。

上面的圖片應(yīng)用Facebook主頁為例子來闡明如何將網(wǎng)頁是分解成Pagelets。該主頁包含幾個Pagelets：“作者Pagelet”，“導(dǎo)航Pagelet”，“新聞動態(tài)Pagelet”，“懇求框Pagelet”，“廣告pagelet”，“友人推舉”和“接洽”等他們是彼此獨破的。當(dāng)“導(dǎo)航Pagelet”顯示給用戶，“消息動態(tài)Pagelet”依然可以在服務(wù)器上正在生成。

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

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

傳統(tǒng)模式在古代網(wǎng)站中效力是十分低下的，由于良多體系的操作次序，不能相互重疊。一些如延時加載JavaScript、并行下載等優(yōu)化技巧已被網(wǎng)絡(luò)社區(qū)普遍采取,使用CSS制作網(wǎng)頁的15條常識，以此來戰(zhàn)勝的一些限度。然而，這些優(yōu)化卻很少波及Web服務(wù)器跟瀏覽器的履行順序造成的瓶頸。當(dāng)Web服務(wù)器正忙天生一個頁面，瀏覽器處于閑置狀況,使用CSS創(chuàng)建有圖標的網(wǎng)站導(dǎo)航菜單，揮霍其周期起早貪黑。當(dāng)Web服務(wù)器實現(xiàn)生成頁面，并將其發(fā)送到瀏覽器，閱讀器則成為機能瓶頸并且Web服務(wù)器對其無從輔助。重疊Web服務(wù)器的生成時間與瀏覽器的渲染時間，咱們不僅能夠減少終極的時光延遲，也能使網(wǎng)頁更早顯示用戶可見區(qū)域給用戶，從而大大減少用戶對延遲的感知。

念頭

--> [網(wǎng)站建設(shè)之]使網(wǎng)站更快的創(chuàng)新技術(shù):BigPipe


(責(zé)任編輯：網(wǎng)站建設(shè))
使網(wǎng)站更快的創(chuàng)新技術(shù) BigPipe相關(guān)文章