中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

大型網(wǎng)站建設(shè),高性能的“流水線技術(shù)”網(wǎng)頁

2022-08-20    分類: 網(wǎng)站建設(shè)

大型網(wǎng)站建設(shè)最關(guān)心的問題就是網(wǎng)站速度,網(wǎng)站速度已成為大型網(wǎng)站建設(shè)公司的主要任務(wù)之一。

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

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

動機(jī)

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

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

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

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

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

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

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

大型網(wǎng)站建設(shè),高性能的“流水線技術(shù)”網(wǎng)頁-新媒體營銷,新媒體廣告公司,成都網(wǎng)絡(luò)營銷,微信代運(yùn)營,高端網(wǎng)站建設(shè),網(wǎng)站建設(shè)公司
(Facebook主頁的Pagelets,每個矩形對應(yīng)一個Pagelet。)

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

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

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

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

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

性能測試結(jié)果

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

大型網(wǎng)站建設(shè),高性能的“流水線技術(shù)”網(wǎng)頁-新媒體營銷,新媒體廣告公司,成都網(wǎng)絡(luò)營銷,微信代運(yùn)營,高端網(wǎng)站建設(shè),網(wǎng)站建設(shè)公司
(Facebook主頁的延遲時間對比)

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

在Facebook,我們鼓勵創(chuàng)造性思考。我們不斷的嘗試創(chuàng)新技術(shù),以使我們的網(wǎng)站更快。
作者蔣長浩目前是Facebook的研究科學(xué)家,他致力于研究使網(wǎng)站更快的各種創(chuàng)新。

當(dāng)前題目:大型網(wǎng)站建設(shè),高性能的“流水線技術(shù)”網(wǎng)頁
標(biāo)題URL:http://www.rwnh.cn/news43/191693.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都app開發(fā)公司
和硕县| 陈巴尔虎旗| 贵南县| 永川市| 南溪县| 双城市| 肇东市| 镇远县| 湖州市| 厦门市| 高青县| 石河子市| 大洼县| 永安市| 五莲县| 大邑县| 遵化市| 鄱阳县| 宜君县| 阳朔县| 浪卡子县| 石楼县| 宜都市| 禄劝| 祥云县| 呼玛县| 弥勒县| 通道| 永安市| 翁源县| 阜新市| 崇州市| 濮阳县| 洱源县| 肥西县| 沙湾县| 连云港市| 邓州市| 波密县| 上犹县| 威信县|