白話網頁的網絡性能

當你有一個網站，有一羣小白在使用時，他們就能夠煩死你，無論是否是你的或你的網站的問題。不光小白，就連一些程序猿、工程獅們，也未必搞得清楚。所以有必要花點時間寫出來讓你們瞭解網頁的網絡性能，以便排查問題。

另外一個目的就是：幾年沒在園裏發博了，來證實一下我還活着。

對於小白用戶來說，查看網絡性能，最大的好處應該就是知道該找誰去解決問題了。

要了解當咱們在瀏覽器地址欄輸入網址並搞回車鍵以後，世界到底發生了什麼。知乎上找到一篇文章，有興趣的能夠看看。

既然要講白話，就不說術語了。要查詢網頁的網絡性能，要先有工具。那就是 火狐瀏覽器 或者 谷歌瀏覽器（官網被牆，相信企鵝的到這裏下，相信熊掌的到這裏下），隨便一個就行，不會安裝的自行解決。

步驟：

1. 打開火狐或谷歌瀏覽器
2. 輸入你要查看性能的網頁的 URL，按回車，打開網頁
3. 按鍵盤上的【F12】鍵，打開開發者工具
4. 點擊【網絡】（Network）
5. 按鍵盤上的【F5】鍵，刷新網頁。此時可能會看到不少網址。一個網頁一般會有幾個甚至上百個文件組成，隨便點擊一個就能看到下圖所示的界面

火狐的界面：

 

谷歌的界面

 

重點來了，咱們只看右下方的紅框的指標：

火狐指標	谷歌指標	說明
被阻擋	Queueing；Stalled	這是瀏覽器內部機制，與網絡性能無關
DNS 解析	DNS Lookup	若是這個時間長，說明你的 DNS 服務器可能有問題，參見 Win7 設置 或 Win 10 設置，推薦阿里DNS：223.5.5.5, 223.6.6.6。也多是網絡就很慢，能夠 PING 223.5.5.5 （不知道怎麼 ping？看這裏），通常時間在 100ms 內爲正常；大於 1秒（1000ms）爲不正常，網絡確定有問題。當這個指標較大（正常值在100ms以內），就要找網絡（IT）工程師解決。
鏈接；TSL 鏈接；發送	Intital connection; Request sent	這幾個指標數值較大（每一個指標正常值在 100ms 以內），說明上行帶寬有問題，好比有人上傳東西，上行帶寬不夠大，或者網絡設備與線路有問題。固然若是你正在提交表單或上傳文件，發送（Request send）指標與你的表單或文件大小有關，這個另說。當這個指標較大（正常值在100ms以內），就要找網絡（IT）工程師解決。
等待	Waiting（TTFB）	這個指標是服務器處理請求的時間 + 內容的第一個字節在網絡上的傳輸時間。當網絡越好，第一個字節的傳輸時間越小，這個指標就越能反映服務器的性能。當這個指標較大（正常值在200ms以內），就要找這個網站的開發工程師（程序猿）解決。
接收	Content Download	這個指標是指網頁的所有內容在網絡上的傳輸時間。指標數據與網頁的大小有關。網頁大小與傳輸時間的比率，就是網絡速率，即你們所說的網速。網速固然是越高越好。在上圖中的界面上，找到火狐【消息頭/響應頭/Content-Length】（谷歌爲Headers/Response Headers/Content-Length）就是網頁的大小（單位爲字節 Byte）。網速(Bps)=ContentLength÷傳輸時間（要將毫秒換算成秒）。帶寬（bps）=網速×8。當計算出來的網速很低（通常瀏覽網頁的可接受值在32000Bps以上，即 32KBps，至關於256Kbps的帶寬），就要找網絡（IT）工程師解決。

 

當你發現網絡很慢，當你把這些指標截圖下來，就能找到對的人，有針對性地快速解決問題。

另外給個 Tip：

如今不少中臺或後臺網站，都使用先後端分離的模式，使用 XHR 通訊。當你點擊頁面的按鈕，發現頁面出現轉圈的圖片，但感受不到頁面跳轉的時候，多數使用了 XHR 通訊。這時，你點擊開發具工具上的【XHR】就很容易找到有問題（很慢）的 URL 了。