一般情況下轴脐，如果網(wǎng)頁(yè)加載時(shí)間超過(guò)5s债热，用戶就會(huì)感覺(jué)頁(yè)面比較卡砾嫉，用戶體驗(yàn)相當(dāng)差，用戶可能會(huì)直接走人窒篱，所以加載的時(shí)間對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)還是相當(dāng)重要的焕刮。那做項(xiàng)目的時(shí)候怎樣分析頁(yè)面的加載速度慢呢舶沿？

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

• JS性能太差，阻塞頁(yè)面

瀏覽器解析過(guò)程中配并，遇到<script>標(biāo)簽的時(shí)候括荡，便會(huì)停止解析過(guò)程，轉(zhuǎn)而去處理腳本溉旋，如果腳本是內(nèi)聯(lián)的畸冲，瀏覽器會(huì)先去執(zhí)行這段內(nèi)聯(lián)的腳本，如果是外鏈的观腊，那么先會(huì)去加載腳本召夹，然后執(zhí)行。在處理完腳本之后恕沫，瀏覽器便繼續(xù)解析HTML文檔。
遇到JS阻塞的情況纱意，就需要具體去看代碼的具體邏輯婶溯。

• 某個(gè)請(qǐng)求慢阻塞頁(yè)面的加載

一般遇到頁(yè)面卡頓，首先去Network里面去查看每個(gè)頁(yè)面所有請(qǐng)求的狀態(tài)及具體的加載時(shí)間偷霉，以及每一個(gè)請(qǐng)求的詳細(xì)耗時(shí)迄委。如果狀態(tài)有非200，如pending类少，則去檢查對(duì)應(yīng)的請(qǐng)求叙身。

• 同域名下的請(qǐng)求數(shù)過(guò)多導(dǎo)致Queueing

就是瀏覽器與同一個(gè)域名建立的TCP連接數(shù)是有限制的，比方chrome設(shè)置的是6個(gè)硫狞，如果說(shuō)同一時(shí)間信轿，發(fā)起的同一域名的請(qǐng)求超過(guò)了6個(gè)，這時(shí)候就需要排隊(duì)了残吩，也就是這個(gè)Queueing時(shí)間财忽。

HTML頁(yè)面是如何完成

當(dāng)我們?cè)跒g覽器輸入url按下Enter后，瀏覽器拿到你輸入的url泣侮，解析出域名【domain.com】得到域名之后進(jìn)行DNS查詢(xún)（TCP/IP協(xié)議中連接是需要知道IP地址）即彪，解析得到域名IP，然后與服務(wù)器建立連接活尊，再與該IP地址來(lái)三次經(jīng)典的握手建立TCP連接隶校，如果協(xié)議頭是http則與目標(biāo)IP的80端口通信，如果是https則是443端口蛹锰，建立好TCP連接后深胳，就可以發(fā)送http請(qǐng)求了，瀏覽器發(fā)起請(qǐng)求宁仔，服務(wù)器響應(yīng)并返回內(nèi)容稠屠，最終就是我們所看到的頁(yè)面內(nèi)容峦睡。

查看頁(yè)面加載時(shí)間

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

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

Finish：頁(yè)面最后一個(gè)請(qǐng)求截止的時(shí)間，如果頁(yè)面加載完后辕万，觸發(fā)了ajax請(qǐng)求枢步，那么該時(shí)間會(huì)加長(zhǎng)。
DOMContentLoaded：DOM內(nèi)容加載并解析完成的時(shí)間渐尿。（通俗來(lái)講就是是頁(yè)面白屏的時(shí)間）
load：頁(yè)面所有的資源（圖片醉途，音頻，視頻等）加載完成的時(shí)間砖茸。（頁(yè)面加載完成隘擎，瀏覽器不再轉(zhuǎn)圈的時(shí)間，頁(yè)面上所有的資源（圖片凉夯，音頻货葬，視頻等）被加載以后才會(huì)觸發(fā)load事件，簡(jiǎn)單來(lái)說(shuō)恍涂，頁(yè)面的load事件會(huì)在DOMContentLoaded被觸發(fā)之后才觸發(fā)宝惰。）

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

各個(gè)時(shí)間段的含義

Queueing
請(qǐng)求排隊(duì)的時(shí)間隘截。就是瀏覽器與同一個(gè)域名建立的TCP連接數(shù)是有限制的扎阶，比方chrome設(shè)置的6個(gè)汹胃，如果說(shuō)同一時(shí)間，發(fā)起的同一域名的請(qǐng)求超過(guò)了6個(gè)东臀，這時(shí)候就需要排隊(duì)了着饥，也就是這個(gè)Queueing時(shí)間。
Stalled
就是瀏覽器得到要發(fā)出請(qǐng)求的指令到請(qǐng)求可以發(fā)出的等待時(shí)間惰赋，一般是代理協(xié)商宰掉、以及等待可復(fù)用的TCP連接釋放的時(shí)間，不包括DNS查詢(xún)赁濒、建立TCP連接等時(shí)間等轨奄。
Stalled/Blocking
請(qǐng)求能夠被發(fā)出去前的等等時(shí)間。包含了用于處理代理的時(shí)間拒炎。另外挪拟，如果有已經(jīng)建立好的連接，那么這個(gè)時(shí)間還包括等待已建立連接被復(fù)用的時(shí)間击你，這個(gè)遵循瀏覽器對(duì)同一源最大TCP連接的規(guī)則舞丛。
Proxy Negotiation
處理代理的時(shí)間。
DNS Lookup
DNS查詢(xún)的時(shí)間果漾，頁(yè)面內(nèi)任何新的域名都需要走一遍 完整的DNS查詢(xún)過(guò)程，已經(jīng)查詢(xún)過(guò)的則走緩存谷誓。
Initial Connection / Connecting
建立TCP連接的時(shí)間绒障，包括TCP的三次握手和SSL的認(rèn)證。
SSL
完成ssl認(rèn)證的時(shí)間
Request sent/sending
請(qǐng)求第一個(gè)字節(jié)發(fā)出前到最后一個(gè)字節(jié)發(fā)出后的時(shí)間捍歪，也就是上傳時(shí)間户辱。
Waiting
請(qǐng)求發(fā)出后，到收到響應(yīng)的第一個(gè)字節(jié)所花費(fèi)的時(shí)間糙臼。
Content Download
收到響應(yīng)的第一個(gè)字節(jié)庐镐，到接受完最后一個(gè)字節(jié)的時(shí)間，就是下載時(shí)間变逃。

深入分析頁(yè)面的性能

粗略掃一眼請(qǐng)求的時(shí)間必逆，都是清一色幾十毫秒。這時(shí)候我們可以在Network里瀑布般的Timeline里很直觀的看出來(lái)請(qǐng)求的耗時(shí)情況揽乱。
在timeline里名眉，每一條線代表一個(gè)TCP的連接，每一種顏色代表請(qǐng)求一個(gè)時(shí)間段凰棉，每條線的顏色一直循環(huán)變化损拢，從灰色到深綠最后藍(lán)色，然后又變灰色撒犀，說(shuō)明瀏覽器建立的TCP連接一直在循環(huán)復(fù)用福压，這樣就省去了三次握手的時(shí)間掏秩。
有一條藍(lán)色豎線和紅色豎線，藍(lán)色豎線表示觸發(fā)DomContentLoad事件觸發(fā)時(shí)間荆姆，紅色表示Load事件觸發(fā)蒙幻，如下圖：

開(kāi)發(fā)者工具的Performance