从理解谷歌浏览器timing到优化页面请求阻塞的问题实战

大家好，今天又是一个阳光明媚的下午....，想想项目即将完事了，想捣鼓下项目优化方面的事情，刚好发现某个页面的数据有时候来的慢，有时候来的快。

于是F12一看，我giao！什么情况，马老师发生甚么事了 ，一个接口请求要 20s ，这好吗？这当然不好。

image

于是我们需要查看谷歌浏览器的timing：可以分析开页面请求开始的那一刻到数据请求结束的详细花费时间。

上图几个字段代表的意思：

Queued at ：表示该请求加入到请求队列中的时刻，请求队列在打开F12后第一次发送请求的时候创建，直到关闭控制台的时候销毁。
Started at ：表示请求开始处理的时刻。
Queueing：表示请求从加入到请求队列中到请求开始处理经过的时间。
Stalled：请求在可以被发送出去之前的等待时间（阻塞时间），一般是等待可复用的TCP连接释放的时间。浏览器对于单个域名只能同时建立4~6个TCP连接（不同浏览器实现有差异）。
Proxy Negotiation：浏览器和代理服务器连接的协商时间。
DNS Lookup：域名解析花费的时间。
Initial Connection：建立TCP连接花费的的时间，包括TCP握手/重试和协商SSL。
Request sent：发送请求花费的时间。
Waiting (TTFB)：从发出请求到接收到响应第一个字节经过的时间，包括网络延迟时间。
Content Download：接收响应花费的时间。
参考：https://www.jianshu.com/p/9c9a9e8da713

注意：Stalled这个字段一般比较关键

可以清楚的看到stalled状态：请求发出去被阻塞耗时长达20s，原来我的这个页面还有加载十来张静态图片，猜测可能是由于静态资源请求先触发，阻塞了xhr请求。

请求被阻塞时候，页面的文字部分接口还在请求中，导致没显示出来，而先显示了图片，由于图片加载慢，导致图片还在加载，文章文章也被阻塞没加载出来。页面效果：

image

我们看到如下图请求 慢的这个接口被图片给阻塞了，只有图片请求完成才会触发它正式从本地向后台发起请求，

image

解决办法：

1、等文章接口请求完，再渲染图片组件，注意我们可以这样做是因为，图片组件是根据img标签的src地址去获取图片，所以可以通过先后顺序来控制请求的先后。即设置一个布尔值控制图片是否显示，重要接口请求完时候设置该布尔值为true，显示图片组件，此时img就会发起请求去加载图片。

2、先让文章接口先请求（还在研究中）