bigpipe技術(shù): 淘寶一篇介紹bigpipe的文章: http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html
另外一篇nodejs使用bigpipe的文章: http://engineering.xueqiu.com/blog/2013/02/27/implementing-bigpipe-in-nodejs/
我就是看上面兩篇來了解bigpipe的,在嘗試用node實(shí)現(xiàn)后,感覺這個很強(qiáng)大,非常強(qiáng)大,目前我用的比較多的是頁面加載完用Ajax請求,然后用前端mvc綁定數(shù)據(jù)。
假如說頁面內(nèi)容很多,加載完dom后,需要7,8個接口來通過ajax來get請求,頁面是需要發(fā)送8,9個請求的。
而使用bigpipe只需要一個請求足以。
引用淘寶文章里面的:
BigPipe 比AJAX 有三個好處:
AJAX 的核心是xmlHttPRequest,客戶端需要異步的向服務(wù)器端發(fā)送請求,然后將傳送過來的內(nèi)容動態(tài)添加到網(wǎng)頁上。如此實(shí)現(xiàn)存在一些缺陷,即發(fā)送往返請求需要耗費(fèi)時間,而BigPipe 技術(shù)使瀏覽器并不需要發(fā)送xmlhttpRequest 請求,這樣就節(jié)省時間損耗。
使用AJAX時,瀏覽器和服務(wù)器的工作順序執(zhí)行。服務(wù)器必須等待瀏覽器的請求,這樣就會造成服務(wù)器的空閑。瀏覽器工作時,服務(wù)器在等待,而服務(wù)器工作時,瀏覽器在等待,這也是一種性能的浪費(fèi)。使用BigPipe,瀏覽器和服務(wù)器可以并行同時工作,服務(wù)器不需要等待瀏覽器的請求,而是一直處于加載頁面內(nèi)容的工作階段,這就會使效率得到更大的提高。
減少瀏覽器發(fā)送到請求。對一個5億用戶的網(wǎng)站來說,減少了使用AJAX額外帶來的請求,會減少服務(wù)器的負(fù)載,同樣會帶來很大的性能提升。
傳統(tǒng)頁面加載:
用戶訪問網(wǎng)頁,瀏覽器發(fā)送一個HTTP 請求到網(wǎng)絡(luò)服務(wù)器
服務(wù)器解析這個請求,然后從存儲層去數(shù)據(jù),接著生成一個html 文件內(nèi)容,并在一個HTTP Response 中把它傳送給客戶端
HTTP response 在網(wǎng)絡(luò)中傳輸
瀏覽器解析這個Response ,創(chuàng)建一個DOM 樹,然后下載所需的CSS 和JS文件
下載完CSS 文件后,瀏覽器解析他們并且應(yīng)用在相應(yīng)的內(nèi)容上
下載完JS 后,瀏覽器解析和執(zhí)行他們
bigpipe加載:
Request parsing:服務(wù)器解析和檢查http request
Datafetching:服務(wù)器從存儲層獲取數(shù)據(jù)
Markup generation:服務(wù)器生成html 標(biāo)記
Network transport : 網(wǎng)絡(luò)傳輸response
CSS downloading:瀏覽器下載CSS
DOM tree construction and CSS styling:瀏覽器生成DOM 樹,并且使用CSS
javaScript downloading: 瀏覽器下載頁面引用的JS 文件
Javascript execution: 瀏覽器執(zhí)行頁面JS代碼
綜上,bigpipe是很實(shí)用的,facebook和國內(nèi)的新浪都是用的這種優(yōu)化辦法,所以可以放心大膽的使用
在http://engineering.xueqiu.com/blog/2013/02/27/implementing-bigpipe-in-nodejs/
這篇文章中已經(jīng)很好的演示了,如何使用node實(shí)現(xiàn);
我結(jié)合angularjs,組合的案例:
https://github.com/tangguangyao/bigpipe
用到一個bigpipe.js來自《深入淺出nodejs》
var Bigpipe=function(){ this.callbacks={}; }
Bigpipe.prototype.ready=function(key,callback){ if(!this.callbacks[key]){ this.callbacks[key]=[]; } this.callbacks[key].push(callback); }
Bigpipe.prototype.set=function(key,data){ var callbacks=this.callbacks[key]||[]; for(var i=0;i
新聞熱點(diǎn)
疑難解答