怎樣分析頁面加載慢

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

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

• JS性能太差，阻塞頁面

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

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

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

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

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

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字段就能夠看到這個請求具體的耗時，以下圖所示：

各個時間段的含義

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事件觸發，以下圖：

開發者工具的Performance