作者：小林coding
图解网站：https://xiaolincoding.com/
大家好，我是小林。
之前有读者在字节一面的时候，被问了这么一个问题：在浏览器输入 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 的工作原理，快去看这篇：ping 的工作原理
我觉得网站访问卡的问题肯定不是因为 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 等文件请求不到的话，就会导致网站显示不出来。
怎么样？体验到计算机网络的美学了吗？
