从理解谷歌浏览器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、先让文章接口先请求(还在研究中)

你可能感兴趣的:(从理解谷歌浏览器timing到优化页面请求阻塞的问题实战)