怎樣分析頁面加載慢

通常狀況下,若是網頁加載時間超過5s,用戶就會感受頁面比較卡,用戶體驗至關差,用戶可能會直接走人,因此加載的時間對於一個網站來講仍是至關重要的。那作項目的時候怎樣分析頁面的加載速度慢呢?css

首先咱們要知道影響頁面加載的因素

  • JS性能太差,阻塞頁面

瀏覽器解析過程當中,遇到<script>標籤的時候,便會中止解析過程,轉而去處理腳本,若是腳本是內聯的,瀏覽器會先去執行這段內聯的腳本,若是是外鏈的,那麼先會去加載腳本,而後執行。在處理完腳本以後,瀏覽器便繼續解析HTML文檔。
遇到JS阻塞的狀況,就須要具體去看代碼的具體邏輯。html

  • 某個請求慢阻塞頁面的加載

通常遇到頁面卡頓,首先去Network裏面去查看每一個頁面全部請求的狀態及具體的加載時間,以及每個請求的詳細耗時。若是狀態有非200,如pending,則去檢查對應的請求。ajax

  • 同域名下的請求數過多致使Queueing

就是瀏覽器與同一個域名創建的TCP鏈接數是有限制的,比方chrome設置的是6個,若是說同一時間,發起的同一域名的請求超過了6個,這時候就須要排隊了,也就是這個Queueing時間。chrome

HTML頁面是如何完成

當咱們在瀏覽器輸入url按下Enter後,瀏覽器拿到你輸入的url,解析出域名【domain.com】獲得域名以後進行DNS查詢(TCP/IP協議中鏈接是須要知道IP地址),解析獲得域名IP,而後與服務器創建鏈接,再與該IP地址來三次經典的握手創建TCP鏈接,若是協議頭是http則與目標IP的80端口通訊,若是是https則是443端口,創建好TCP鏈接後,就能夠發送http請求了,瀏覽器發起請求,服務器響應並返回內容,最終就是咱們所看到的頁面內容。瀏覽器

瀏覽器的渲染過程

查看頁面加載時間

以chrome爲例,打開頁面後,按F12或者點擊右鍵菜單裏的檢查,就進入了開發者模式,開發者模式裏面有不少功能,跟頁面加載時間相關的就是Network標籤。以下圖所示:緩存

開發者工具

依次是17個請求;622K數據;頁面最後一個請求截止用時1.7s;DOM內容加載並解析完成用時1.48;頁面全部的資源(圖片,音頻,視頻等)加載完成用時1.58s服務器

最下面一行反應了該頁面的總體加載狀況

Finish:頁面最後一個請求截止的時間,若是頁面加載完後,觸發了ajax請求,那麼該時間會加長。
DOMContentLoaded:DOM內容加載並解析完成的時間。(通俗來說就是是頁面白屏的時間)
load:頁面全部的資源(圖片,音頻,視頻等)加載完成的時間。(頁面加載完成,瀏覽器再也不轉圈的時間,頁面上全部的資源(圖片,音頻,視頻等)被加載之後纔會觸發load事件,簡單來講,頁面的load事件會在DOMContentLoaded被觸發以後才觸發。)

通常狀況下html頁面在解析渲染的過程當中,會有大量的請求,好比外鏈的css、js、圖片等等,這些資源都須要瀏覽器去從新發起http請求。這些請求其實都是相似的一個過程。
首先咱們打開F12開發都工具的Network標籤,看看單個請求的各個時間段(不一樣的時段分別有不一樣的顏色區分),將鼠標懸停在waterfall字段就能夠看到這個請求具體的耗時,以下圖所示:dom

waterfall飄窗

各個時間段的含義

Queueing
請求排隊的時間。就是瀏覽器與同一個域名創建的TCP鏈接數是有限制的,比方chrome設置的6個,若是說同一時間,發起的同一域名的請求超過了6個,這時候就須要排隊了,也就是這個Queueing時間。
Stalled
就是瀏覽器獲得要發出請求的指令到請求能夠發出的等待時間,通常是代理協商、以及等待可複用的TCP鏈接釋放的時間,不包括DNS查詢、創建TCP鏈接等時間等。
Stalled/Blocking
請求可以被髮出去前的等等時間。包含了用於處理代理的時間。另外,若是有已經創建好的鏈接,那麼這個時間還包括等待已創建鏈接被複用的時間,這個遵循瀏覽器對同一源最大TCP鏈接的規則。
Proxy Negotiation
處理代理的時間。
DNS Lookup
DNS查詢的時間,頁面內任何新的域名都須要走一遍 完整的DNS查詢過程,已經查詢過的則走緩存。
Initial Connection / Connecting
創建TCP鏈接的時間,包括TCP的三次握手和SSL的認證。
SSL
完成ssl認證的時間
Request sent/sending
請求第一個字節發出前到最後一個字節發出後的時間,也就是上傳時間。
Waiting
請求發出後,到收到響應的第一個字節所花費的時間。
Content Download
收到響應的第一個字節,到接受完最後一個字節的時間,就是下載時間。

深刻分析頁面的性能

粗略掃一眼請求的時間,都是清一色幾十毫秒。這時候咱們能夠在Network裏瀑布般的Timeline裏很直觀的看出來請求的耗時狀況。
在timeline裏,每一條線表明一個TCP的鏈接,每一種顏色表明請求一個時間段,每條線的顏色一直循環變化,從灰色到深綠最後藍色,而後又變灰色,說明瀏覽器創建的TCP鏈接一直在循環複用,這樣就省去了三次握手的時間。
有一條藍色豎線和紅色豎線,藍色豎線表示觸發DomContentLoad事件觸發時間,紅色表示Load事件觸發,以下圖:工具

Timeline

開發者工具的Performance

Performance

相關文章
相關標籤/搜索