网络请求问题解决指南

本文翻译自Network Issues Guide

由于个人水平有限，翻译中难免有纰漏和不足，望不吝指正。讨论地址

参见起步了解更多关于Chrome Devtool中网络面板的基础知识。

队列中或停滞的请求

症状

Chrome浏览器支持6个请求的并行下载，后面的请求将会推入请求队列中或者停滞不前。一旦前面的六个请求之一完成，队列中的一个请求将会启动。

Figure 1. 一个网络面板中关于队列或停滞请求的例子。在上图的瀑布图中，你可以看到6个并行的logo-1024px.png的xhr请求。而后面的图片请求将停止不前直到上面某一个请求完成。

原因

同一域名下太多请求发出。在HTTP/1.0或者HTTP/1.1连接下，Chrome对于同一主机支持最多同时6个TCP链接。

解决方案

• 如果一定要用HTTP/1.0或者HTTP/1.1，可以通过域名分片来解决上述问题。
• 使用HTTP/2，在HTTP/2协议下不用对域名进行分片。
• 移除或者延迟不必要的请求来使得一些关键性请求能够更早下载。

Slow Time To First Byte (TTFB)

症状

请求花费很长时间来接受到服务器传来的第一个字节。

Figure 2. 上面是一个关于花费长时间从服务器获取到第一个字节的例子。在瀑布图中长长的绿色横柱表示了请求等待了很长时间。

原因

• 客户端和服务器之间的链接慢。
• 服务器反应迟缓，在本地启动服务，如果你依然有一个很慢的TTFB，那说明服务器链接或者服务器本身反应很慢。

解决方案

• 如果是连接缓慢，考虑将你的内容放到CDN上面或者更换服务器提供商。
• 如果是服务反应慢，考虑优化数据库请求、实施缓存或者更改服务器配置。

下载缓慢

症状

请求中的下载阶段花费很长时间

Figure 3. 上图是一个请求下载花费长时间的例子，在上面的瀑布图中elements-panel.png旁的的一条长长的蓝色横柱表示了花费了很长时间来下载该图片。

原因

• 客户端和服务器链接缓慢
• 下载内容过大。

解决方案

• 考虑将你的内容通过CDN来提供，或者更换服务器提供商。
• 优化请求、减少下载内容体积。