白话网页的网络性能

当你有一个网站，有一群小白在使用时，他们就可以烦死你，不管是不是你的或你的网站的问题。不光小白，就连一些程序猿、工程狮们，也未必搞得清楚。因此有必要花点时间写出来让大家了解网页的网络性能，以便排查问题。

另一个目的就是：几年没在园里发博了，来证明一下我还活着。

对于小白用户来讲，查看网络性能，最大的好处应该就是知道该找谁去解决问题了。

要了解当我们在浏览器地址栏输入网址并搞回车键之后，世界到底发生了什么。知乎上找到一篇文章，有兴趣的可以看看。

既然要讲白话，就不说术语了。要查询网页的网络性能，要先有工具。那就是 火狐浏览器 或者 谷歌浏览器（官网被墙，相信企鹅的到这里下，相信熊掌的到这里下），随便一个就行，不会安装的自行解决。

步骤：

1. 打开火狐或谷歌浏览器
2. 输入你要查看性能的网页的 URL，按回车，打开网页
3. 按键盘上的【F12】键，打开开发者工具
4. 点击【网络】（Network）
5. 按键盘上的【F5】键，刷新网页。此时可能会看到很多网址。一个网页通常会有几个甚至上百个文件组成，随便点击一个就能看到下图所示的界面

火狐的界面：

 

谷歌的界面

 

重点来了，我们只看右下方的红框的指标：

火狐指标	谷歌指标	说明
被阻挡	Queueing；Stalled	这是浏览器内部机制，与网络性能无关
DNS 解析	DNS Lookup	如果这个时间长，说明你的 DNS 服务器可能有问题，参见 Win7 设置 或 Win 10 设置，推荐阿里DNS：223.5.5.5, 223.6.6.6。也可能是网络就很慢，可以 PING 223.5.5.5 （不知道怎么 ping？看这里），一般时间在 100ms 内为正常；大于 1秒（1000ms）为不正常，网络肯定有问题。当这个指标较大（正常值在100ms之内），就要找网络（IT）工程师解决。
连接；TSL 连接；发送	Intital connection; Request sent	这几个指标数值较大（每个指标正常值在 100ms 之内），说明上行带宽有问题，比如有人上传东西，上行带宽不够大，或者网络设备与线路有问题。当然如果你正在提交表单或上传文件，发送（Request send）指标与你的表单或文件大小有关，这个另说。当这个指标较大（正常值在100ms之内），就要找网络（IT）工程师解决。
等待	Waiting（TTFB）	这个指标是服务器处理请求的时间 + 内容的第一个字节在网络上的传输时间。当网络越好，第一个字节的传输时间越小，这个指标就越能反映服务器的性能。当这个指标较大（正常值在200ms之内），就要找这个网站的开发工程师（程序猿）解决。
接收	Content Download	这个指标是指网页的全部内容在网络上的传输时间。指标数据与网页的大小有关。网页大小与传输时间的比率，就是网络速率，即大家所说的网速。网速当然是越高越好。在上图中的界面上，找到火狐【消息头/响应头/Content-Length】（谷歌为Headers/Response Headers/Content-Length）就是网页的大小（单位为字节 Byte）。网速(Bps)=ContentLength÷传输时间（要将毫秒换算成秒）。带宽（bps）=网速×8。当计算出来的网速很低（一般浏览网页的可接受值在32000Bps以上，即 32KBps，相当于256Kbps的带宽），就要找网络（IT）工程师解决。

 

当你发现网络很慢，当你把这些指标截图下来，就能找到对的人，有针对性地快速解决问题。

另外给个 Tip：

现在很多中台或后台网站，都使用前后端分离的模式，使用 XHR 通信。当你点击页面的按钮，发现页面出现转圈的图片，但感觉不到页面跳转的时候，多数使用了 XHR 通信。这时，你点击开发具工具上的【XHR】就很容易找到有问题（很慢）的 URL 了。