即是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:所有消耗的時間,包括請求結束后的渲染時間