web前端入門(mén)到實(shí)戰(zhàn):分析頁(yè)面加載慢

一般情況下轴脐,如果網(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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市胞枕,隨后出現(xiàn)的幾起案子杆煞,更是在濱河造成了極大的恐慌,老刑警劉巖腐泻,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件决乎,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡派桩,警方通過(guò)查閱死者的電腦和手機(jī)构诚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)铆惑,“玉大人范嘱,你說(shuō)我怎么就攤上這事≡蔽海” “怎么了丑蛤?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)撕阎。 經(jīng)常有香客問(wèn)我受裹,道長(zhǎng),這世上最難降的妖魔是什么虏束? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任棉饶,我火速辦了婚禮,結(jié)果婚禮上镇匀,老公的妹妹穿的比我還像新娘照藻。我一直安慰自己,他們只是感情好汗侵,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布幸缕。 她就那樣靜靜地躺著,像睡著了一般晰韵。 火紅的嫁衣襯著肌膚如雪冀值。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天宫屠,我揣著相機(jī)與錄音列疗,去河邊找鬼。 笑死浪蹂,一個(gè)胖子當(dāng)著我的面吹牛抵栈,可吹牛的內(nèi)容都是我干的告材。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼古劲,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼斥赋!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起产艾,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤疤剑,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后闷堡,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體隘膘,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年杠览,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了弯菊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡踱阿,死狀恐怖管钳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情软舌,我是刑警寧澤才漆,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站佛点,受9級(jí)特大地震影響栽烂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜恋脚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望焰手。 院中可真熱鬧糟描,春花似錦、人聲如沸书妻。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)躲履。三九已至见间,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間工猜,已是汗流浹背米诉。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留篷帅,地道東北人史侣。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓拴泌,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親惊橱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蚪腐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容