怎樣分析頁面加載慢

niuxiaowei111 發(fā)布于2019-08-26 10:25 / 2424人閱讀

摘要：通俗來講就是是頁面白屏的時間頁面所有的資源圖片，音頻，視頻等加載完成的時間。深入分析頁面的性能粗略掃一眼請求的時間，都是清一色幾十毫秒。

一般情況下，如果網(wǎng)頁加載時間超過5s，用戶就會感覺頁面比較卡，用戶體驗(yàn)相當(dāng)差，用戶可能會直接走人，所以加載的時間對于一個網(wǎng)站來說還是相當(dāng)重要的。那做項(xiàng)目的時候怎樣分析頁面的加載速度慢呢？

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

JS性能太差，阻塞頁面

瀏覽器解析過程中，遇到

查看頁面加載時間

以chrome為例，打開頁面后，按F12或者點(diǎn)擊右鍵菜單里的檢查，就進(jìn)入了開發(fā)者模式，開發(fā)者模式里面有很多功能，跟頁面加載時間相關(guān)的就是Network標(biāo)簽。如下圖所示：

依次是17個請求；622K數(shù)據(jù)；頁面最后一個請求截止用時1.7s；DOM內(nèi)容加載并解析完成用時1.48；頁面所有的資源（圖片，音頻，視頻等）加載完成用時1.58s

Finish：頁面最后一個請求截止的時間，如果頁面加載完后，觸發(fā)了ajax請求，那么該時間會加長。
DOMContentLoaded：DOM內(nèi)容加載并解析完成的時間。（通俗來講就是是頁面白屏的時間）
load：頁面所有的資源（圖片，音頻，視頻等）加載完成的時間。（頁面加載完成，瀏覽器不再轉(zhuǎn)圈的時間，頁面上所有的資源（圖片，音頻，視頻等）被加載以后才會觸發(fā)load事件，簡單來說，頁面的load事件會在DOMContentLoaded被觸發(fā)之后才觸發(fā)。）

一般情況下html頁面在解析渲染的過程中，會有大量的請求，比如外鏈的css、js、圖片等等，這些資源都需要瀏覽器去重新發(fā)起http請求。這些請求其實(shí)都是類似的一個過程。
首先我們打開F12開發(fā)都工具的Network標(biāo)簽，看看單個請求的各個時間段（不同的時段分別有不同的顏色區(qū)分），將鼠標(biāo)懸停在waterfall字段就可以看到這個請求具體的耗時，如下圖所示：

各個時間段的含義

Queueing
請求排隊(duì)的時間。就是瀏覽器與同一個域名建立的TCP連接數(shù)是有限制的，比方chrome設(shè)置的6個，如果說同一時間，發(fā)起的同一域名的請求超過了6個，這時候就需要排隊(duì)了，也就是這個Queueing時間。
Stalled
就是瀏覽器得到要發(fā)出請求的指令到請求可以發(fā)出的等待時間，一般是代理協(xié)商、以及等待可復(fù)用的TCP連接釋放的時間，不包括DNS查詢、建立TCP連接等時間等。
Stalled/Blocking
請求能夠被發(fā)出去前的等等時間。包含了用于處理代理的時間。另外，如果有已經(jīng)建立好的連接，那么這個時間還包括等待已建立連接被復(fù)用的時間，這個遵循瀏覽器對同一源最大TCP連接的規(guī)則。
Proxy Negotiation
處理代理的時間。
DNS Lookup
DNS查詢的時間，頁面內(nèi)任何新的域名都需要走一遍 完整的DNS查詢過程，已經(jīng)查詢過的則走緩存。
Initial Connection / Connecting
建立TCP連接的時間，包括TCP的三次握手和SSL的認(rèn)證。
SSL
完成ssl認(rèn)證的時間
Request sent/sending
請求第一個字節(jié)發(fā)出前到最后一個字節(jié)發(fā)出后的時間，也就是上傳時間。
Waiting
請求發(fā)出后，到收到響應(yīng)的第一個字節(jié)所花費(fèi)的時間。
Content Download
收到響應(yīng)的第一個字節(jié)，到接受完最后一個字節(jié)的時間，就是下載時間。

深入分析頁面的性能

粗略掃一眼請求的時間，都是清一色幾十毫秒。這時候我們可以在Network里瀑布般的Timeline里很直觀的看出來請求的耗時情況。
在timeline里，每一條線代表一個TCP的連接，每一種顏色代表請求一個時間段，每條線的顏色一直循環(huán)變化，從灰色到深綠最后藍(lán)色，然后又變灰色，說明瀏覽器建立的TCP連接一直在循環(huán)復(fù)用，這樣就省去了三次握手的時間。
有一條藍(lán)色豎線和紅色豎線，藍(lán)色豎線表示觸發(fā)DomContentLoad事件觸發(fā)時間，紅色表示Load事件觸發(fā)，如下圖：

開發(fā)者工具的Performance