沒(méi)事使用代理上了下facebook，注冊(cè)進(jìn)入個(gè)人首頁(yè)后，習(xí)慣性的查看源代碼，發(fā)現(xiàn)了1個(gè)很有意思的現(xiàn)象，首頁(yè)內(nèi)容不少，但源代碼中HTML的代碼卻很少，但去多出了很多段的javascript代碼，這些js代碼都是用于動(dòng)態(tài)生成html的，facebook為什么需要這樣做了？出于職業(yè)習(xí)慣，研究研究：
一、html代碼。
先看看首頁(yè)查看的源代碼，因?yàn)樵创a比較大，所以把圖片壓縮了下，可能看不太清楚，只需要注意圖中紅色是html代碼，其余黑壓壓一片的就全部是JS代碼：
二、JS代碼
看到黑壓壓的JS代碼是不是被嚇一跳，下面就截取一段JS來(lái)分析(其余段的JS都是類似的)，facebook源代碼中充斥了類似于下面的JS代碼：
讓我們?cè)倏纯碽ig_pipe.onPageletArrive函數(shù)到底做了什么了？我們只關(guān)注參數(shù)中的id,js,css,content4個(gè)參數(shù)，可以看出js和css都是進(jìn)行過(guò)編碼，下面是解碼后我們關(guān)注的代碼：
看到還原后的JS，你應(yīng)該猜出onPageletArrive函數(shù)是干嘛的吧，其實(shí)onPageletArrive最主要實(shí)現(xiàn)就是把"content"中的html內(nèi)容插入到對(duì)應(yīng)id(上面的"pagelet_welcome_box")的html元素中,并下載對(duì)應(yīng)的css和JS。
三、chunk、flush
看到上面的分析后，大家一定奇怪，facebook為什么要生成那么多段JS，再用js去動(dòng)態(tài)插入html代碼，這不是脫了褲子放屁，多此一舉嗎？還不如直接生成html代碼了。facebook當(dāng)然不會(huì)那么笨了，讓我們先監(jiān)控下facebook的http請(qǐng)求，監(jiān)控圖如下：
注意上圖中紅色部分，原來(lái)facebook使用了chunk對(duì)頁(yè)面進(jìn)行分塊輸出。這就比較容易理解了，facebook首頁(yè)的js代碼段不是1次就全部輸出的，而是一段一段進(jìn)行輸出的。
什么是chunk和如何使用chunk,請(qǐng)參考我的另1篇博文：flush讓頁(yè)面分塊,逐步呈現(xiàn)
總結(jié)
facebook使用chunk技術(shù)讓頁(yè)面分塊輸出成很多JS段，這樣做的好處就是服務(wù)器和客戶端可以并行進(jìn)行處理，不用等服務(wù)器全部處理完畢，客戶端才進(jìn)行處理。
舉個(gè)博客園首頁(yè)的列子，博客園首頁(yè)分為下面幾塊("推薦博客排行","首頁(yè)隨筆列表","最新新聞"...),
我們一般對(duì)該http請(qǐng)求處理如下：
1. 瀏覽器發(fā)送http請(qǐng)求
2. 服務(wù)器處理請(qǐng)求(從緩存讀取前50個(gè)推薦博客，從數(shù)據(jù)庫(kù)讀取"首頁(yè)隨筆列表",從數(shù)據(jù)庫(kù)讀取"最新新聞")，生成首頁(yè)的html代碼。
3. 服務(wù)器發(fā)送html代碼給客戶端
4、瀏覽器接收到響應(yīng)，處理html(下載css,js,image,執(zhí)行js等等)
可以看出傳統(tǒng)的http請(qǐng)求4個(gè)過(guò)程中，每個(gè)過(guò)程都必須等待前1個(gè)過(guò)程完成后才能執(zhí)行，這樣就存在很大的資源浪費(fèi)。
facebook的對(duì)該http請(qǐng)求的處理如下：
1. 瀏覽器發(fā)送http請(qǐng)求
2. 服務(wù)器處理請(qǐng)求(從緩存讀取前50個(gè)推薦博客,生成"推薦博客"的js代碼段，flush輸出該代碼段,
服務(wù)器繼續(xù)讀取"首頁(yè)隨筆列表"，并生成輸入js代碼段。
服務(wù)器繼續(xù)讀取"最新新聞"，并生成輸入js代碼段。
3. 瀏覽器接收到j(luò)s代碼段，下載該代碼段所需的js和css。插入html代碼。
在這個(gè)處理流程中，最大的特點(diǎn)就是2,3是并行進(jìn)行處理的，服務(wù)器處理完一部分?jǐn)?shù)據(jù)就把已經(jīng)處理好的數(shù)據(jù)交給瀏覽器進(jìn)行呈現(xiàn)處理，自己再繼續(xù)處理其他的數(shù)據(jù)。
PS：文章看完了，有些同學(xué)可能會(huì)想，為什么不像博客園一樣，前臺(tái)全部用ajax來(lái)異步讀取"推薦博客" ,“最新新聞”的數(shù)據(jù)了，這樣做就不會(huì)出現(xiàn)因?yàn)橐幚硖鄶?shù)據(jù)而讓客戶端等待太久的問(wèn)題了。我覺(jué)得對(duì)于facebook這種并發(fā)量巨大的網(wǎng)站，使用這種方法無(wú)疑會(huì)產(chǎn)生太多的請(qǐng)求，比如facebook首頁(yè)用了14個(gè)chunk，如果使用ajax，則需要多14個(gè)request請(qǐng)求，這將增加不少服務(wù)器的壓力吧。
相關(guān)文章： 名站技術(shù)分析 — 淺談tudou.com首頁(yè)圖片延遲加載的效果