大家好，我是小林。

之前有讀者在字節一面的時候，被問了這么一個問題：在瀏覽器輸入 URL 并回車后，如果頁面遲遲沒有出現，怎么去排查問題？

我的回答：

最直接的辦法就是抓包，排查的思路大概有：

• 先確定是服務端的問題，還是客戶端的問題。先確認瀏覽器是否可以訪問其他網站，如果不可以，說明客戶端網絡自身的問題，然后檢查客戶端網絡配置（連接wifi正不正常，有沒有插網線）；如果可以正常其他網頁，說明客戶端網絡是可以正常上網的。
• 如果客戶端網絡沒問題，就抓包確認 DNS 是否解析出了 IP 地址，如果沒有解析出來，說明域名寫錯了，如果解析出了 IP 地址，抓包確認有沒有和服務端建立三次握手，如果能成功建立三次握手，并且發出了 HTTP 請求，但是就是沒有顯示頁面，可以查看服務端返回的響應碼：

如果是404錯誤碼，檢查輸入的url是否正確；

如果是500，說明服務器此時有問題；

如果是200，F12看看前端代碼有問題導致瀏覽器沒有渲染出頁面。

• 如果客戶端網絡是正常的，但是訪問速度很慢，導致很久才顯示出來。這時候要看客戶端的網口流量是否太大的了，導致tcp發生丟包之類的問題。

總之就是一層一層有沒有插網線，網絡配置是否正確、DNS有沒有解析出 IP地址、TCP有沒有三次握手、HTTP返回的響應碼是什么。

實戰教學

正好，昨天有位朋友的網站，訪問 10 秒都還沒顯示網頁，后面我幫他排查后，定位出了問題，修改問題后，網站訪問速度就正常了。

所以，接下來，跟大家說下，我當時的排查思路。

事情的開始

昨天一大早上，朋友（程序員吳師兄）急忙找我，讓我幫忙看看他的網站，很多人反饋說他的網站卡的要死，訪問 10 秒都還沒顯示網頁，所以很多人點開他的網站就溜了。

而且他說他自己訪問很快，我自己也訪問了下，確實訪問很慢，10多秒都還沒顯示出網頁。

接著，他給我發兩個檢測網站速度圖。

第一張是網站測速結果：

第二張是 ping 檢測結果：

第二張是網站訪問速度檢測結果：

他問我：ping 檢測是紅的，但國內測速是綠的，這兩者有什么關系么問題原因是 ping 不通導致的嗎？

ping 檢測走 icmp 協議，網站檢測走 http 協議。

我覺得網站訪問卡的問題肯定不是因為 ping 不通導致的，因為網站檢測是綠的，至少證明了網站的 http 整個網絡鏈路都是沒問題的，訪問網站不會用到 icmp 協議。

至于 ping 檢測為什么是紅的，是因為他服務器的防火墻屏蔽了 icmp 協議。

雖然 ping 能幫助我們判斷網絡延時，但是 ping 不通「不代表」服務器掉線了、網站不能訪問了，因為有可能是 icmp 協議被防火墻屏蔽了。

那到底是什么原因導致呢？如何繼續排查？

我首先用抓包工具抓了一下訪問網站的網絡包。

發現能正常進行 TCP 三次握手、TLS 握手、HTTP 數據傳輸，而且延時也很低。從這又證明，網站的網絡是完全沒問題的。

接下來，我就用瀏覽器的 F12 調試工具去排查了。

結果被我發現了好多個訪問超時的 CSS 文件，原因就是這個了。這些  CSS 文件 遲遲請求不到，導致網站一直沒有顯示。

而且，這些 CSS 文件請求地址都是 jsdelivr cdn，這個 jsdelivr cdn 在國內已經用不了。

至于吳師兄自己為什么能正常訪問，大家都懂。

我之前自己的網站也是因為 jsdelivr cdn 的問題導致圖片全部掛了 ，因為我最開始用的圖床就是這個，后面我就自己購買了圖床，才把問題解決了。

后面解決的方式也很簡單，就是不要用  jsdelivr cdn 來加速靜態文件就好了。他把網站的這個插件功能關閉后，就正常了。

好了，整個實戰排查過程就這些了，簡單總結下有用的知識：

• ping 不通不代表網站不正常，因為有可能是服務器的防火墻屏蔽了 ICMP 協議；
• 網站顯示不出來，先抓包確認 TCP 握手、TLS 握手、HTTP 請求是否正常；如果都正常，證明網絡是沒問題的，接著就用瀏覽器的 F12 調試工具看看，是哪個文件的請求有問題，一般來說 CSS，JS 等文件請求不到的話，就會導致網站顯示不出來。