网络请求问题解决指南

本文翻译自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来提供，或者更换服务器提供商。
• 优化请求、减小下载内容体积。