chrome Stalled时间过长(频繁发起超过6个请求之后,会卡顿很久)

Network Timing

使用Chrome浏览器请求多个接口时发现前面的请求Network Timing中stalled时间明显较短,到第四个请求时stalled时间开始加长,超过6个请求之后,stallled时间过长,导致接口整体请求时间变长,页面渲染变慢。

如下图:

出现原因:

为什么会这样呢,通过查看stalled发现和TCP连接有关。

TCP连接

  TCP是网络传输层中的协议,三次握手建立连接、四次挥手终止连接。问题中,因为使用axios结合async、await异步请求来请求接口,因此,7个TCP同时发起连接,但是客服端和服务端的连接并没有立即全部建立成功,

  通过查找资料发现浏览器对并发请求数量会做限制,项目使用HTTP1.1协议,在Chrome中的最大并发数是6,到第七个请求时开始等待,stalled就变长了。

HTTP

  HTTP0.9、HTTP1.0每个请求单独建立一个TCP连接,请求完成连接断开;

  HTTP1.1可以持久连接,TCP建立连接后不会立即关闭,多个请求可以复用同一个TCP连接,同时请求可以并行,但是不同浏览器对并行次数有个数限制,以下是各个浏览器的并发次数;

 

解决方案:

(一)感兴趣同学可以参考这边文章:

  链接:关于页面请求发起后,通过F12查看到,被挂起页面中stalled花费很长时间问题的追查

 

(二)或者可以用用promise解决

  参考廖雪峰大神地址:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

 

(三)一次性暴力解决:

  这种行为是由于 Chrome 锁定了缓存并在再次请求相同资源之前等待查看一个请求的结果。答案是找到一种使请求独一无二的方法。我在查询字符串中添加了一个随机数,现在一切正常。

  参考stackoverflow:https://stackoverflow.com/questions/27513994/chrome-stalls-when-making-multiple-requests-to-same-resource

 

posted @ 2022-05-26 10:29  xiexie0812  阅读(8924)  评论(0编辑  收藏  举报