網頁加載流程及其優化方法

目前的技術實現中，用戶提出頁面訪問請求後，頁面的完整加載流程以下：

1. 用戶訪問網頁，瀏覽器發送一個HTTP 請求到網絡服務器

2. 服務器解析這個請求，而後從存儲層去數據，接着生成一個html 文件內容，並在一個HTTP Response 中把它傳送給客戶端

3. HTTP response 在網絡中傳輸

4. 瀏覽器解析這個Response ，建立一個DOM 樹，而後下載所需的CSS 和JS文件

5. 下載完CSS 文件後，瀏覽器解析他們而且應用在相應的內容上

6. 下載完JS 後，瀏覽器解析和執行他們

完整流程見圖1.圖中左側表示服務器，右側表示瀏覽器。瀏覽器先發送請求，而後服務器進行查找數據，生成頁面，返回html 代碼，最後瀏覽器進行渲染頁面。這種模式有很是明顯的缺陷：流程中的操做有着嚴格的順序，若是前面的一個操做沒有執行結束，後面的操做就不能執行，即操做之間是不能重疊。這樣就形成性能的瓶頸：服務器生成一個頁面的內容時，瀏覽器是空閒的，顯示空白內容；而當瀏覽器加載渲染頁面內容時，服務器又是空閒的，時間與性能的浪費由此產生。

考慮圖2 中現有的服務模型，橫軸表示花費的時間。黃色表示在服務器的生成頁面內容的時間，白色表示網絡傳輸時間，藍色表示在瀏覽器渲染頁面的時間。能夠看出，現有的模式形成很大的時間浪費。 考慮圖3 中的狀況，圖中綠色表示服務器從春儲層取查數據花費的時間，在海量數據下，當執行一條很費時的查詢語句時（以下圖右側），服務器就就阻塞在那 裏沒有其餘操做，而瀏覽器更是得不到任何反饋。這會形成很是不友好的用戶體驗，用戶不知道什麼緣由使他們等待很長時間。

面對上述問題，咱們看下BigPipe的解決辦法。BigPipe提出分塊的概念，即根據頁面內容位置的不一樣，將整個頁面分紅不一樣的塊兒——稱爲pagelet。該技術的設計者Changhao Jiang 是研究電子電路的博士，可能從微機上獲得了啓發，將衆多pagelet加載的不一樣階段像流水線同樣在瀏覽器和服務器上執行，這樣就作到了瀏覽器和服務器的並行化，從而達到重疊服務器端運行時間和瀏覽器端運行時間的目的。使用BigPipe 不只能夠節省時間，使加載的時間縮短，並且能夠同過pagelet的分步輸出，使一部分的頁面內容更快的輸出，從而得到更好的用戶體驗。

想了解BigPipe更多內容請看：BigPipe學習研究