大家好，我是小林。

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

我的回答：

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

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

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

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

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

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

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

實(shí)戰(zhàn)教學(xué)

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

所以，接下來，跟大家說下，我當(dāng)時(shí)的排查思路。

事情的開始

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

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

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

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

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

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

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

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

我覺得網(wǎng)站訪問卡的問題肯定不是因?yàn)?ping 不通導(dǎo)致的，因?yàn)榫W(wǎng)站檢測(cè)是綠的，至少證明了網(wǎng)站的 http 整個(gè)網(wǎng)絡(luò)鏈路都是沒問題的，訪問網(wǎng)站不會(huì)用到 icmp 協(xié)議。

至于 ping 檢測(cè)為什么是紅的，是因?yàn)樗?wù)器的防火墻屏蔽了 icmp 協(xié)議。

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

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

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

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

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

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

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

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

我之前自己的網(wǎng)站也是因?yàn)?jsdelivr cdn 的問題導(dǎo)致圖片全部掛了 ，因?yàn)槲易铋_始用的圖床就是這個(gè)，后面我就自己購(gòu)買了圖床，才把問題解決了。

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

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

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