值得關(guān)注的一些Network面板小知識

前言

最近在做XXX性能檢測工具時，發(fā)現(xiàn)跟Chrome瀏覽器接觸很多，里面一些調(diào)試技巧，以及查看性能指標(biāo)都離不來它。

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

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

看完之后，收獲很大的，很多排查問題的手段都可以在里面找到。

那我就稍微列舉幾個??

一些小技巧

查看加載事件

網(wǎng)絡(luò)面板上，對于事件DOMContentLoaded和load事件，分別是藍線和紅線，如圖

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

查看請求Timing細節(jié)

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

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

這里面我們需要關(guān)注的一個點就是TTFB，它是很重要的一個指標(biāo)，如果你玩過Lighthouse做性能檢測的話，你會發(fā)現(xiàn)，Lighthouse會發(fā)送一個報告，里面有個信息就是它,類似于

至于對TTFB相關(guān)的，可以閱讀這篇文章：https://web.dev/time-to-first-byte/

查看請求對堆棧跟蹤

當(dāng)JavaScript語句導(dǎo)致請求資源時，將鼠標(biāo)懸停在“啟動器”列上以查看導(dǎo)致請求的堆棧跟蹤。有些時候，可以查看哪些請求是多余的，畢竟能減少請求次數(shù)還是十分有必要的。

導(dǎo)出請求的數(shù)據(jù)

有些時候，我們需要一份數(shù)據(jù)的報告，那么應(yīng)該這么做呢？

有了請求的數(shù)據(jù)報告后，那么我們?nèi)绾畏治鏊?，就需要借助這個HAR分析器了?？梢詤⒖迹篽ttps://toolbox.googleapps.com/apps/har_analyzer/

顯示更多信息

網(wǎng)絡(luò)日志的列是可以配置的。您可以隱藏您不使用的列。還有許多默認情況下隱藏的列，您可能會發(fā)現(xiàn)它們很有用。

右鍵單擊 "網(wǎng)絡(luò)日志 "表頭，選擇 "域"?，F(xiàn)在會顯示每個資源的域。

模擬較慢的網(wǎng)絡(luò)連接

你用來建站的電腦的網(wǎng)絡(luò)連接可能比用戶的移動設(shè)備的網(wǎng)絡(luò)連接要快。通過節(jié)制頁面，你可以更好地了解一個頁面在移動設(shè)備上加載所需的時間。

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

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

過濾請求

DevTools提供了許多工作流程，用于過濾掉與手頭任務(wù)無關(guān)的資源。

過濾文本框支持許多不同類型的過濾，可以按字符串，正則表達式或?qū)傩赃^濾。

舉個例子下

看完后，你一定想說，

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

參考資料

[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/