页面出现假死的问题

Posted 2020-06-21 ddddn

下面谈论的是Chrome浏览器。

很早以前，我就遇到过页面假死的现象。具体表现是：在标签页上一直转圈，页面不能打开。使用当前浏览器重新访问同一域名，会出现同样的现象。

最近我在工作中再次遇到这个问题。

出现的原因是一个页面同时发起了大量ajax请求。(例如都是向xxx.com域名发出请求)。每一个请求都会花较长时间。

此时新开页面访问xxx.com就会出现卡死现象,并且在页面左下角会出现“正在等待可用的套接字”。

这时候进入chrome 内部调试工具 chrome://net-internals/#sockets,可以看到transport_socket_pool列表的name(对于请求的域名，包括端口)字段。可以看到xxx.com:80行对应的active列为6，然后pending列包含剩下的待处理的请求数。并且可以看到Top Priority列的优先级。此时我们可以看到为HIGHEST。（我经过试验发现，在包含大量待处理请求的时候，此时再打开一个页面访问同一域名，就会使该字段的优先级提升）。

chrome 内部的机制是在对同一域名的连接socket上限是6，我们可以在chrome://net-internals/#sockets中看到。

如果此时再有向该域名发出请求，在dev-tools(开发者工具)的network项看到请求详情出现“Provisional headers are shown”字样（此时，浏览器是还未发出该请求的）。导致其他正常的业务请求（需要快速返回数据）不能发出，导致用户的困扰。

我的解决办法是对于开始的大量ajax请求（这些请求都是不需要立即返回数据的请求），改变请求域名（a.xxx.com），也就是不同域名指向同一服务器。类似于Hash Dmain的做法。

这样一来也只会阻塞向a.xxx.com：80的请求。

 

Ps：chrome://net-internals 包含了大量的调试信息，有兴趣的同学可以多去研究一下，并分享。（估计大多只能到国外去查找资料了）

      对于上面所说的同一域名，我想应该是域名+端口号，从transport_socket_pool表的name字段看起来是这样的,不知道会不会考虑协议。具体的还未验证。