對(duì)做前端開發(fā)的同學(xué)來說，請(qǐng)求排隊(duì)养筒、網(wǎng)絡(luò)曾撤、Web 應(yīng)用程序、頁面加載闽颇、資源下載這些針對(duì)網(wǎng)站的性能指標(biāo)是很熟悉的盾戴。對(duì)白屏?xí)r間、首屏?xí)r間兵多、頁面加載完成時(shí)間尖啡、資源下載完成時(shí)間以及整頁時(shí)間這些性能指標(biāo)也不算陌生。
但是這10個(gè)指標(biāo)分別都是什么意思剩膘？跟網(wǎng)站又有什么關(guān)系衅斩？為什么 TOPN 頁面會(huì)驚現(xiàn)平均時(shí)間為1分鐘？是誰在拖網(wǎng)站訪問速度的「后腿」怠褐？本文希望能夠幫助大家解決心中的困惑畏梆。
其實(shí)奈懒，性能指標(biāo)不在多奠涌，找到適合自己業(yè)務(wù)的，作為判斷標(biāo)準(zhǔn)才是最好的磷杏。
用戶打開一個(gè)頁面的過程
從用戶在瀏覽器地址欄里面輸入一個(gè)網(wǎng)址溜畅，到用戶最終看到頁面，在頁面上可以進(jìn)行各種操作极祸，簡單分為一下幾個(gè)過程:
1慈格、用戶輸入網(wǎng)址怠晴，瀏覽器發(fā)出請(qǐng)求。（主要是網(wǎng)絡(luò)耗時(shí)）
2浴捆、Web 服務(wù)器接到請(qǐng)求蒜田，處理請(qǐng)求，（主要是 Web 服務(wù)器耗時(shí)）
3选泻、Web 服務(wù)器返回?cái)?shù)據(jù)冲粤，瀏覽器開始接受數(shù)據(jù)（主要是網(wǎng)絡(luò)耗時(shí)）
4、瀏覽器邊接受數(shù)據(jù)邊加載頁面中的腳本（下載 js 腳本等耗時(shí)）
5页眯、瀏覽器下載頁面中的樣式色解、圖片、視頻等資源（下載圖片等耗時(shí)）
OneAPM Browser Insight 指標(biāo)介紹
OneAPM 基于瀏覽器端的性能監(jiān)控產(chǎn)品 Browser Insight 針對(duì)這10個(gè)指標(biāo)餐茵，分別從兩個(gè)方面描述了網(wǎng)頁加載過程：
第一個(gè)方面 頁面加載5階段的耗時(shí)科阎，用于分片運(yùn)營（請(qǐng)求排隊(duì)、網(wǎng)絡(luò)忿族、Web 應(yīng)用程序锣笨、頁面加載、資源下載）
第二個(gè)方面 頁面加載過程中的5個(gè)時(shí)間點(diǎn)道批，分別對(duì)應(yīng)用戶感知網(wǎng)頁加載過程中的5個(gè)關(guān)鍵時(shí)間點(diǎn)和頁面狀態(tài)
- 分段運(yùn)營的5個(gè)指標(biāo)中错英，請(qǐng)求排隊(duì)和 Web 應(yīng)用程序 是從 Ai 中獲取到的
- 網(wǎng)絡(luò) = 總網(wǎng)絡(luò)時(shí)間- Web 應(yīng)用程序耗時(shí)
- 頁面加載時(shí)間段=頁面加載完成時(shí)間-白屏?xí)r間
- 資源下載時(shí)間段=資源下載完成時(shí)間-面加載完成時(shí)間
- 在試用的過程中，當(dāng)應(yīng)用程序異常時(shí)候隆豹，web應(yīng)用程序面積就會(huì)增大
- 當(dāng)網(wǎng)絡(luò)異常時(shí)候椭岩，網(wǎng)絡(luò)的面積就會(huì)增大
平時(shí)大家看到頁面加載時(shí)段或者資源下載時(shí)段面積大，是因?yàn)樵谝话闱闆r下璃赡，Web 和網(wǎng)絡(luò)都不是性能的瓶頸判哥，性能瓶頸往往在復(fù)雜的前端頁面和資源的加載過程。
頁面加載過程中 5 個(gè)關(guān)鍵的時(shí)間點(diǎn)
白屏?xí)r間：打開一個(gè)頁面感覺屏幕從白色開始變化時(shí)刻
首屏?xí)r間：頁面剛開始加載是雜亂無章塌计，無樣式的（在網(wǎng)速緩慢時(shí)候特別明顯），當(dāng)頁面樣式加載完畢的時(shí)候侯谁，頁面就好看多了
頁面加載完成時(shí)間：
頁面加載完成時(shí)間是和業(yè)務(wù)關(guān)系最為密切的時(shí)間點(diǎn)锌仅，大量 js 業(yè)務(wù)邏輯都在這個(gè)時(shí)間點(diǎn)觸發(fā)；
如果你發(fā)現(xiàn)頁面上一個(gè)按鈕開始無法點(diǎn)擊墙贱，過一會(huì)可以點(diǎn)擊了热芹，那么可以點(diǎn)擊的時(shí)間點(diǎn)就是頁面加載完成時(shí)間；
對(duì)于移動(dòng)端或者 PC 端惨撇，有很多應(yīng)用是 js 控制出現(xiàn)一個(gè) loading 動(dòng)畫伊脓，當(dāng)有數(shù)據(jù)了在去掉 loading，js 控制出現(xiàn) loading 的時(shí)刻就是頁面加載完成時(shí)間串纺；
如果頁面很長丽旅，開始沒有滾動(dòng)條，當(dāng)滾動(dòng)條出現(xiàn)的時(shí)候纺棺，就是頁面加載完成時(shí)間榄笙；
資源下載完成時(shí)間：可以看到頁面上的圖片、看到 iframe 嵌套頁面里面的內(nèi)容祷蝌，瀏覽器標(biāo)簽不在出現(xiàn)loding不斷旋轉(zhuǎn)的時(shí)刻茅撞，就是資源加載完成的時(shí)間點(diǎn)；
- 整頁時(shí)間：頁面徹底加載完成的時(shí)間米丘，一般情況下資源下載完成時(shí)間和整頁面時(shí)間很接近。
影響頁面加載時(shí)段的主要因素
1： 基礎(chǔ)的網(wǎng)絡(luò)質(zhì)量
2： 網(wǎng)頁 Html 文件的大小 例如 你是10k糊啡，1M 10M
3：是頁面中通過 script 標(biāo)簽引入的腳本下載和執(zhí)行拄查，包括 head 中的也包括 body 中
因?yàn)橐粋€(gè)瀏覽器同時(shí)可以可以下載的文件是有限的，同一個(gè)域名下可以同時(shí)下載的文件也是有限的
總的來說一般的瀏覽器為2~4 性能好點(diǎn)的瀏覽器是8個(gè)左右
所以這個(gè)階段網(wǎng)頁中下載 CSS棚蓄，圖片等資源堕扶，都會(huì)影響頁面加載時(shí)段的面積
因?yàn)閏ss影響頁面樣式，所以一般放在 head 里面梭依，公共的 js 文件放在 head 里面稍算，業(yè)務(wù)的 js 建議通過動(dòng)態(tài)加載
影響資源下載時(shí)段的主要因素
1：基礎(chǔ)的網(wǎng)絡(luò)質(zhì)量
2：頁面中圖片、視頻役拴、iframe 嵌套頁糊探，廣告等，都在這個(gè)階段下載
3：下載資源個(gè)數(shù)和域名數(shù)河闰，因?yàn)闉g覽器從同一個(gè)域名下同時(shí)下載資源是有限的科平，所以域名個(gè)數(shù)個(gè)和下載文件的個(gè)數(shù)都會(huì)影響整體性能
所以一般都會(huì)把一個(gè)域名下載資源分散到3個(gè)左右域名下，同時(shí)下載姜性，提高頁面性能
4：第三方資源 例如百度統(tǒng)計(jì)匠抗、谷歌統(tǒng)計(jì)、 百度地圖 一般都會(huì)在這個(gè)階段加載污抬，如果第三方資源處現(xiàn)在問題汞贸，資源下載時(shí)段面積也會(huì)增大
查看那些資源的下載拖慢了整個(gè)頁面的速度
Browser Insight 的 Trace 會(huì)收集緩慢頁面的資源加載信息印机，可以作為性能優(yōu)化的參考矢腻。歡迎大家訪問官方網(wǎng)站，免費(fèi)試用一下這款專業(yè)的前端性能優(yōu)化產(chǎn)品射赛。
