web前端效能：

即是web使用者在訪問一個頁面時所要花費的時間總和。即一個完全意義上的使用者響應時間，相對於伺服器的響應時間而言還會包括更多的內容和影響因素。那麼一個web頁面的完整請求包括了哪些部分的時間總和就是web前段效能分析和優化所需要了解的基礎知識，先了解一下使用者從瀏覽器訪問一個url後到頁面完全展示所有內容的整個過程吧。

頁面的請求過程：

1、瀏覽器的url請求
2、遞迴尋找DNS伺服器
3、連線目標IP並建立TCP連線
4、向目標伺服器傳送http請求
5、web伺服器接收請求後處理
6、web伺服器返回相應的結果【無效、重定向、正確頁面等】

7、瀏覽器接收返回的http內容

================================前端解析分割線===========================================

8、開始解析html檔案，當然是自上而下，先是頭部，後是body

9、當解析到頭部css外部連結時，同步去下載，如果遇到外部js連結也是下載【不過js連結不建議放在頭部，因為耽誤頁面第一展現時間】

10、接著解析body部分，邊解析邊開始生成對應的DOM樹，同時等待css檔案下載

11、一旦css檔案下載完畢，那麼就同步去用已經生成的DOM節點+CSS去生成渲染樹

12、渲染樹一旦有結構模型了，接著就會同步去計算渲染樹節點的佈局位置

13、一旦計算出來渲染的座標後，又同步去開始渲染

14、10-13步進行過程中如果遇到圖片則跳過去渲染下面內容，等待圖片下載成功後會返回來在渲染原來圖片的位置

15、同14步，如果渲染過程中出現js程式碼調整DOM樹機構的情況，也會再次重新來過，從修改DOM那步開始

16、最終所有節點和資源都會渲染完成

=========================================分析結束分割線==============================================

17、渲染完成後開始page的onload事件
18、整個頁面load完成

整個過程中會有很多的分別請求，所以TCP連線會很多，並且每一個用完都會自己關了，除非是keep-live型別的可以請求多次才關閉。

綜上所述：
一個頁面的請求等於一個或多個url的請求，因此一個頁面裡包含的外部請求數會影響頁面的整體效能
【每請求一次就要多佔用一次cpu使用、多一次tcp連線】
每個url的請求又包括定址、連線、請求傳輸、返回傳輸、斷連的過程；因此每個階段的外部環境也會影響整體效能
【DNS伺服器的定址時間，請求和返回內容時的網路環境】
除了URL請求數量外，每個請求的內容大小也是影響效能的主要因素
【檔案越大消耗在傳輸過程中的時間就越長】
請求同樣多的資源，並行請求和序列請求速率是不一樣的，所以請求的資源要儘量支援同步請求
【同步請求不同資源，即請求被髮送到不同的資源伺服器即可】
依據瀏覽器的載入、渲染機制，選擇合適的HTML內容排版方式
【減少反覆建立物件例項的次數、充分利用快取機制】
優先載入使用者關注的內容
【css載入優於js內容，首屏內容優於非首屏內容】

關注完http請求的過程後，再來關注整個請求過程中關注的幾個時間點，通過確定時間點就可以確定影響效能的時間段，就是確定影響效能的因素。根據上面的介紹主要的幾個時間點又可以分頁面的整體時間點、以及單個url請求過程中的時間點。【基於httpanalyzer工具

的指標】

單個url請求的主要時間點：
1、Cache Read：快取讀取時間，或304錯誤的處理時間 
2、Block：請求等待時間，取決於快取檢查，網路連線等待
3、DNS Lookup：DNS伺服器查詢時間，取決於dns服務的數量，dns註冊的域
4、Connect：tcp連線的總時間，取決於連線型別，ssh，keepalive都會比http長
5、Send first to last：傳送請求內容的時間，取決於請求內容大小，及上行的傳輸速度
6、Wait：等待響應的時間，取決於網路環境的響應，web伺服器的處理時間
7、Receive first to last：接收響應內容的時間，取決於響應內容，下行的傳輸速度，也要考慮伺服器的頻寬
8、Time to first byte：從請求一直到接收到第一個字元的總時間，等於1+2+3+4+5+6
9、Network：網路消耗時間，等於3+4
10、Begin to end：整個請求的總時間，等於1+2+3+4+5+6+7


單個頁面的主要時間點：
1、DOM Ready Time: DOM完成的時間，從接收html到完全轉換成dom樹所需的時間
2、DOM Ready to Page Load: 頁面元素的載入和渲染完成時間，包括html，css，img及其它內容
3、Page Load Time: page頁onload事件的時間，其實際時間等於總時間 - （DOM ready + 元素渲染時間）
4、URL Requests Begin to End:url請求所消耗的所有時間，從傳送請求發起到接收最後一個位元組斷開
5、Network Time:消耗在網路上的時間，即tcp的連線時間
6、Begin to End:所有消耗的時間，包括請求結束後的渲染時間


PS：
瀏覽器是怎樣工作的

http://blog.csdn.net/zzzaquarius/article/details/6532299

英文原文：

http://taligarsiel.com/Projects/howbrowserswork1.htm