大家好，我是小林。

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

我的回答：

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

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

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

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

如果是200，F(xiàn)12看看前端代碼有問題導致瀏覽器沒有渲染出頁面。

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

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

實戰(zhàn)教學

正好，昨天有位朋友的網(wǎng)站，訪問 10 秒都還沒顯示網(wǎng)頁，后面我?guī)退挪楹?，定位出了問題，修改問題后，網(wǎng)站訪問速度就正常了。

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

事情的開始

昨天一大早上，朋友（程序員吳師兄）急忙找我，讓我?guī)兔纯此木W(wǎng)站，很多人反饋說他的網(wǎng)站卡的要死，訪問 10 秒都還沒顯示網(wǎng)頁，所以很多人點開他的網(wǎng)站就溜了。

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

接著，他給我發(fā)兩個檢測網(wǎng)站速度圖。

第一張是網(wǎng)站測速結(jié)果：

第二張是 ping 檢測結(jié)果：

第二張是網(wǎng)站訪問速度檢測結(jié)果：

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

ping 檢測走 icmp 協(xié)議，網(wǎng)站檢測走 http 協(xié)議。

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

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

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

那到底是什么原因?qū)е履?？如何繼續(xù)排查？

我首先用抓包工具抓了一下訪問網(wǎng)站的網(wǎng)絡(luò)包。

發(fā)現(xiàn)能正常進行 TCP 三次握手、TLS 握手、HTTP 數(shù)據(jù)傳輸，而且延時也很低。從這又證明，網(wǎng)站的網(wǎng)絡(luò)是完全沒問題的。

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

結(jié)果被我發(fā)現(xiàn)了好多個訪問超時的 CSS 文件，原因就是這個了。這些  CSS 文件 遲遲請求不到，導致網(wǎng)站一直沒有顯示。

而且，這些 CSS 文件請求地址都是 jsdelivr cdn，這個 jsdelivr cdn 在國內(nèi)已經(jīng)用不了。

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

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

后面解決的方式也很簡單，就是不要用  jsdelivr cdn 來加速靜態(tài)文件就好了。他把網(wǎng)站的這個插件功能關(guān)閉后，就正常了。

好了，整個實戰(zhàn)排查過程就這些了，簡單總結(jié)下有用的知識：

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