关于请求被挂起页面加载缓慢问题的追查（stalled 时间过长）

关于请求被挂起页面加载缓慢问题的追查

缘起

有一个Dashboard的页面大约有十几个图表，每一个图表是一个ajax请求。

突然有一天改了页面中间几个图表的查询逻辑，导致ajax请求响应时间比较长。

然后就出现了图表加载出现了顺序等待，后面本来很快就能加载出来的图表也必须等待上面的图表加载一些之后才能加载。

可能的原因

中间的图表加载慢是因为本来就是慢查询，可是为什么后面的图表正常必须等到中间的图表加载一部分之后才能正常加载了？

思考了一下还是先看看network里面每一个请求的具体状态在分析。

随意找了一个请求看了一下

这是请求

Pending

时的请求信息：



下面是请求成功后查看请求的各种状态和时间：



这一个请求正常，只是响应时间比较长



这个请求的截图是有问题的，发现一个问题就是

可以看到

Stalled

了1分多钟。神奇的是竟然不报超时错误而是成功返回了。

然后针对这个

Stalled

我直接去搜了一下，网上说这种情况的原因有好几种，我们先看看别人的思路和解决办法。

思路：

Stalled（阻塞）

　　浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；

　　优化措施：

　　1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能；

　　2、脚本置于页面底部；

浏览器对同一域名进行请求的最大并发连接数

当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的并发数量。并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的进行数量。
如果同时只有2个并发连接数数量，那网页打开的时候只能依赖于这2条线程，前面如果有打开慢的内容，就会直接影响到后面的内容打开。但是如果同时有更多的并发连接数，这样就会大大的提高网页加载速度。浏览器的并发连接数也并非越大越好。
下表概括了基于主机上运行的IE浏览器的版本的最大并发连接数、主机的连接速度和服务器的受支持的协议版本。
版本HTTP1.0服务器（宽带连接）HTTP1.1服务器（宽带连接）HTTP1.0服务器（拨号连接）HTTP1.1服务器（拨号连接）

InternetExplorer7和早期版本	4	2	4	2
InternetExplorer8	6	6	4	2
InternetExplorer9	10	10	?	?
InternetExplorer10	6	6	?	?
InternetExplorer11	6	6	?	?
chrome、firefox	6	6	?	?

然后我就去查看我的ajax请求，数了一下，大约是在第6个请求的时候就开始有

Stalled

时间了。

为了确定是否这个问题，接下来我做了一个实验，就是减少响应时间慢的ajax请求，看看接下来的页面效果。

试验后发现，当有6个响应时间比较长的ajax请求的时候会阻塞到后面的ajax请求执行，少于6个的时候不会阻塞后续的ajax执行。

实验的是chrome浏览器，最大进程数为6，和实验数据吻合。

结论：一

浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；

前端Dashboard页面展示的图表数据最好是提前统计好，然后放到缓存里面，避免统计时间比较长的ajax请求太多阻塞其他请求。