是誰拖了網站訪問速度的「後腿」 ？

對作前端開發的同窗來講，請求排隊、網絡、Web 應用程序、頁面加載、資源下載這些針對網站的性能指標是很熟悉的。對白屏時間、首屏時間、頁面加載完成時間、資源下載完成時間以及整頁時間這些性能指標也不算陌生。

可是這10個指標分別都是什麼意思？跟網站又有什麼關係？爲何 TOPN 頁面會驚現平均時間爲1分鐘？是誰在拖網站訪問速度的「後腿」？本文但願可以幫助你們解決心中的困惑。

其實，性能指標不在多，找到適合本身業務的，做爲判斷標準纔是最好的。

用戶打開一個頁面的過程

從用戶在瀏覽器地址欄裏面輸入一個網址，到用戶最終看到頁面，在頁面上能夠進行各類操做，簡單分爲一下幾個過程:

一、用戶輸入網址，瀏覽器發出請求。（主要是網絡耗時） 二、Web 服務器接到請求，處理請求，（主要是 Web 服務器耗時） 三、Web 服務器返回數據，瀏覽器開始接受數據（主要是網絡耗時） 四、瀏覽器邊接受數據邊加載頁面中的腳本（下載 js 腳本等耗時） 五、瀏覽器下載頁面中的樣式、圖片、視頻等資源（下載圖片等耗時）

OneAPM Browser Insight 指標介紹

OneAPM 基於瀏覽器端的性能監控產品 Browser Insight 針對這10個指標，分別從兩個方面描述了網頁加載過程：

第一個方面 頁面加載5階段的耗時，用於分片運營（請求排隊、網絡、Web 應用程序、頁面加載、資源下載）

第二個方面 頁面加載過程當中的5個時間點，分別對應用戶感知網頁加載過程當中的5個關鍵時間點和頁面狀態

• 分段運營的5個指標中，請求排隊和 Web 應用程序 是從 Ai 中獲取到的
• 網絡 = 總網絡時間- Web 應用程序耗時
• 頁面加載時間段=頁面加載完成時間-白屏時間
• 資源下載時間段=資源下載完成時間-面加載完成時間
• 在試用的過程當中，當應用程序異常時候，web應用程序面積就會增大
• 當網絡異常時候，網絡的面積就會增大

平時你們看到頁面加載時段或者資源下載時段面積大，是由於在通常狀況下，Web 和網絡都不是性能的瓶頸，性能瓶頸每每在複雜的前端頁面和資源的加載過程。

頁面加載過程當中 5 個關鍵的時間點

白屏時間：打開一個頁面感受屏幕從白色開始變化時刻 首屏時間：頁面剛開始加載是雜亂無章，無樣式的（在網速緩慢時候特別明顯），當頁面樣式加載完畢的時候，頁面就好看多了

頁面加載完成時間：

• 頁面加載完成時間是和業務關係最爲密切的時間點，大量 js 業務邏輯都在這個時間點觸發；

• 若是你發現頁面上一個按鈕開始沒法點擊，過一會能夠點擊了，那麼能夠點擊的時間點就是頁面加載完成時間；

• 對於移動端或者 PC 端，有不少應用是 js 控制出現一個 loading 動畫，當有數據了在去掉 loading，js 控制出現 loading 的時刻就是頁面加載完成時間；

• 若是頁面很長，開始沒有滾動條，當滾動條出現的時候，就是頁面加載完成時間；

• 資源下載完成時間：能夠看到頁面上的圖片、看到 iframe 嵌套頁面裏面的內容，瀏覽器標籤不在出現loding不斷旋轉的時刻，就是資源加載完成的時間點；

• 整頁時間：頁面完全加載完成的時間，通常狀況下資源下載完成時間和整頁面時間很接近。

影響頁面加載時段的主要因素

1： 基礎的網絡質量 2： 網頁 Html 文件的大小 例如 你是10k，1M 10M 3：是頁面中經過 script 標籤引入的腳本下載和執行，包括 head 中的也包括 body 中

由於一個瀏覽器同時能夠能夠下載的文件是有限的，同一個域名下能夠同時下載的文件也是有限的
總的來講通常的瀏覽器爲2~4 性能好點的瀏覽器是8個左右
因此這個階段網頁中下載 CSS，圖片等資源，都會影響頁面加載時段的面積
由於css影響頁面樣式，因此通常放在 head 裏面，公共的 js 文件放在 head 裏面，業務的 js 建議經過動態加載

影響資源下載時段的主要因素

1：基礎的網絡質量 2：頁面中圖片、視頻、iframe 嵌套頁，廣告等，都在這個階段下載 3：下載資源個數和域名數，由於瀏覽器從同一個域名下同時下載資源是有限的，因此域名個數個和下載文件的個數都會影響總體性能 因此通常都會把一個域名下載資源分散到3個左右域名下，同時下載，提升頁面性能 4：第三方資源 例如百度統計、谷歌統計、 百度地圖 通常都會在這個階段加載，若是第三方資源處如今問題，資源下載時段面積也會增大

查看那些資源的下載拖慢了整個頁面的速度

Browser Insight 的 Trace 會收集緩慢頁面的資源加載信息，能夠做爲性能優化的參考。歡迎你們訪問官方網站，免費試用一下這款專業的前端性能優化產品。