大家好，我是小林。

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

我的回答：

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

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

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

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

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

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

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

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

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

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

事情的開(kāi)始

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

至于吳師兄自己為什么能正常訪(fǎng)問(wèn)，大家都懂。

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

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

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

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