怎樣分析頁(yè)面加載慢

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

摘要：通俗來(lái)講就是是頁(yè)面白屏的時(shí)間頁(yè)面所有的資源圖片，音頻，視頻等加載完成的時(shí)間。深入分析頁(yè)面的性能粗略?huà)咭谎壅?qǐng)求的時(shí)間，都是清一色幾十毫秒。

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

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

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

瀏覽器解析過(guò)程中，遇到

查看頁(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è)面的性能

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

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

GPU云服務(wù)器云服務(wù)器 js頁(yè)面加載數(shù)據(jù)慢加載慢數(shù)據(jù)加載慢對(duì)比域名加載慢

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106144.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

niuxiaowei111

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Go語(yǔ)言核心36講（Go語(yǔ)言實(shí)戰(zhàn)與應(yīng)用八）--學(xué)習(xí)筆記

閱讀 2239·2021-11-19 09:55
我用Python爬取了女神視界，爬蟲(chóng)之路永無(wú)止境「內(nèi)附源碼」

閱讀 2726·2021-11-11 16:55
Python表白代碼：太秀了，用過(guò)的人都找到了對(duì)象...【滿(mǎn)屏玫瑰盛開(kāi)！】

閱讀 3254·2021-09-28 09:36
虛擬主機(jī)能承受多少ip-虛擬主機(jī)有什么優(yōu)勢(shì)嗎？

閱讀 2036·2021-09-22 16:05
【譯】Vertical-Align: All You Need To Know

閱讀 3389·2019-08-30 15:53
上下高度固定（100px），中間自適應(yīng)

閱讀 1853·2019-08-30 15:44
css選擇器和jQuery選擇器

閱讀 2972·2019-08-29 13:10
? Emoji ? - 收藏集 - 掘金

閱讀 1408·2019-08-29 12:30

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

怎樣分析頁(yè)面加載慢

相關(guān)文章