值得關注的一些Network面板小知識

 前言

最近在做XXX性能檢測工具時，發現跟Chrome瀏覽器接觸很多，裏面一些調試技巧，以及查看性能指標都離不來它。

看了下官方的教程，推薦一下⬇️

地址: https://developer.chrome.com/

看完之後，收穫很大的，很多排查問題的手段都可以在裏面找到。

那我就稍微列舉幾個⬇️

一些小技巧

查看加載事件

網絡面板上，對於事件DOMContentLoaded和load事件，分別是藍線和紅線，如圖

查看加載事件

可以看出，基本上每個事件執行完成後，什麼資源在它加載完成，上面的瀑布圖很明顯。

---

查看請求Timing細節

Timing細節劃分

當我們具體點擊一個資源時，我們點開Timing選項卡，可以看到具體一下信息，具體這些信息啥意思呢？

• Queueing：瀏覽器在以下情況下會排隊處理請求
• 有更高優先級的請求。
• 這個原點已經有6個TCP連接開放，這已經是極限了。僅適用於HTTP1.0和HTTP1.1。
• 瀏覽器正在短暫地分配磁盤緩存中的空間。
• Stalled：由於排隊中描述的任何原因，可以停止該請求。
• DNS Lookup：瀏覽器正在解析請求的IP地址。
• Initial connection：瀏覽器正在建立連接，包括TCP握手/重試和協商SSL。
• Proxy negotiation：瀏覽器正在使用代理服務器協商請求。
• Request sent：請求正在發送。
• Waiting (TTFB)：計算的是整個延遲的往返時間。TTFB 不僅僅是在服務器上花費的時間，還包括設備請求發送到服務器，再從服務器返回到設備的時間。
• Content Download：瀏覽器正在接收響應。

這裏面我們需要關注的一個點就是TTFB，它是很重要的一個指標，如果你玩過Lighthouse做性能檢測的話，你會發現，Lighthouse會發送一個報告，裏面有個信息就是它,類似於

TTFB

至於對TTFB相關的，可以閱讀這篇文章：https://web.dev/time-to-first-byte/

---

查看請求對堆棧跟蹤

查看導致請求的堆棧

當JavaScript語句導致請求資源時，將鼠標懸停在“啓動器”列上以查看導致請求的堆棧跟蹤。有些時候，可以查看哪些請求是多餘的，畢竟能減少請求次數還是十分有必要的。

---

導出請求的數據

有些時候，我們需要一份數據的報告，那麼應該這麼做呢？

HAR請求數據報告

有了請求的數據報告後，那麼我們如何分析它呢，就需要藉助這個HAR分析器了。可以參考：https://toolbox.googleapps.com/apps/har_analyzer/

---

顯示更多信息

網絡日誌的列是可以配置的。您可以隱藏您不使用的列。還有許多默認情況下隱藏的列，您可能會發現它們很有用。

更多信息

右鍵單擊 "網絡日誌 "表頭，選擇 "域"。現在會顯示每個資源的域。

---

模擬較慢的網絡連接

你用來建站的電腦的網絡連接可能比用戶的移動設備的網絡連接要快。通過節制頁面，你可以更好地瞭解一個頁面在移動設備上加載所需的時間。

選擇網速

下面的選項，可以選擇Fast 3G，Slow 3G, Offline,或者自己來設置，如圖

設置網絡狀態

可以自己設置Download速度，Upload速度，Latency速度，完全滿足你的需求。

---

過濾請求

DevTools提供了許多工作流程，用於過濾掉與手頭任務無關的資源。

過濾請求

過濾文本框支持許多不同類型的過濾，可以按字符串，正則表達式或屬性過濾。

舉個例子下

過濾特定文件的資源

---

看完後，你一定想說，

如果你想探索更多的功能都話，可以自己看官方文檔，鏈接都放在參考資料裏面了。

參考資料

[1] Network features reference: https://developer.chrome.com/docs/devtools/network/reference/

[2] GitHub-[developer.chrome.com]: https://github.com/GoogleChrome/developer.chrome.com/tree/main/site/en/docs/devtools/network

[3] 如何記錄 HAR 文件: https://toolbox.googleapps.com/apps/har_analyzer/

[4]Proxy server: https://web.dev/progressive-web-apps/

[5] Chrome Developers: https://developer.chrome.com/

[6]Inspect network activity: https://developer.chrome.com/docs/devtools/network/

[7]Reduce server response times (TTFB): https://web.dev/time-to-first-byte/

[8] Adaptive serving based on network quality: https://web.dev/adaptive-serving-based-on-network-quality/

END

如果覺得這篇文章還不錯

點擊下面卡片關注我

來個【分享、點贊、在看】三連支持一下吧

   “分享、點贊、在看” 支持一波 

本文分享自微信公衆號 - 胡哥有話說（hugeyouhuashuo）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。