轉 web前端性能分析--原理篇

轉自http://blog.csdn.net/five3/article/details/7686715

web前端性能：

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

頁面的請求過程：

一、瀏覽器的url請求
二、遞歸尋找DNS服務器
三、鏈接目標IP並創建TCP鏈接
四、向目標服務器發送http請求
五、web服務器接收請求後處理
六、web服務器返回相應的結果【無效、重定向、正確頁面等】

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

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

八、開始解析html文件，固然是自上而下，先是頭部，後是body

九、當解析到頭部css外部連接時，同步去下載，若是遇到外部js連接也是下載【不過js連接不建議放在頭部，由於耽誤頁面第一展示時間】

十、接着解析body部分，邊解析邊開始生成對應的DOM樹，同時等待css文件下載

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

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

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

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

1五、同14步，若是渲染過程當中出現js代碼調整DOM樹機構的狀況，也會再次從新來過，從修改DOM那步開始

1六、最終全部節點和資源都會渲染完成

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

1七、渲染完成後開始page的onload事件
1八、整個頁面load完成

 

整個過程當中會有不少的分別請求，因此TCP鏈接會不少，而且每個用完都會本身關了，除非是keep-live類型的能夠請求屢次才關閉。

綜上所述：
一個頁面的請求等於一個或多個url的請求，所以一個頁面裏包含的外部請求數會影響頁面的總體性能
【每請求一次就要多佔用一次cpu使用、多一次tcp鏈接】
每一個url的請求又包括尋址、鏈接、請求傳輸、返回傳輸、斷連的過程；所以每一個階段的外部環境也會影響總體性能
【DNS服務器的尋址時間，請求和返回內容時的網絡環境】
除了URL請求數量外，每一個請求的內容大小也是影響性能的主要因素
【文件越大消耗在傳輸過程當中的時間就越長】
請求一樣多的資源，並行請求和串行請求速率是不同的，因此請求的資源要儘可能支持同步請求
【同步請求不一樣資源，即請求被髮送到不一樣的資源服務器便可】
依據瀏覽器的加載、渲染機制，選擇合適的HTML內容排版方式
【減小反覆建立對象實例的次數、充分利用緩存機制】
優先加載用戶關注的內容
【css加載優於js內容，首屏內容優於非首屏內容】

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

 

單個url請求的主要時間點：
一、Cache Read：緩存讀取時間，或304錯誤的處理時間 
二、Block：請求等待時間，取決於緩存檢查，網絡鏈接等待
三、DNS Lookup：DNS服務器查找時間，取決於dns服務的數量，dns註冊的域
四、Connect：tcp鏈接的總時間，取決於鏈接類型，ssh，keepalive都會比http長
五、Send first to last：發送請求內容的時間，取決於請求內容大小，及上行的傳輸速度
六、Wait：等待響應的時間，取決於網絡環境的響應，web服務器的處理時間
七、Receive first to last：接收響應內容的時間，取決於響應內容，下行的傳輸速度，也要考慮服務器的帶寬
八、Time to first byte：從請求一直到接收到第一個字符的總時間，等於1+2+3+4+5+6
九、Network：網絡消耗時間，等於3+4
十、Begin to end：整個請求的總時間，等於1+2+3+4+5+6+7


單個頁面的主要時間點：
一、DOM Ready Time: DOM完成的時間，從接收html到徹底轉換成dom樹所需的時間
二、DOM Ready to Page Load: 頁面元素的加載和渲染完成時間，包括html，css，img及其它內容
三、Page Load Time: page頁onload事件的時間，其實際時間等於總時間 - （DOM ready + 元素渲染時間）
四、URL Requests Begin to End:url請求所消耗的全部時間，從發送請求發起到接收最後一個字節斷開
五、Network Time:消耗在網絡上的時間，即tcp的鏈接時間
六、Begin to End:全部消耗的時間，包括請求結束後的渲染時間


PS：
瀏覽器是怎樣工做的

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

英文原文：

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