聊聊浏览器请求并发限制

随着现在的网页设计的越来越炫酷，功能越来越丰富。伴随着的是网页加载的资源越来越多，常常一个页面加载的CSS、JS、图片、接口等超过几十上百个。

但其实，在客户端，浏览器并不一定会对每个资源开个连接去请求加载，是有并发限制的。

下面这张图是不同浏览器不同版本的并发限制统计：

这其实是基于多方面因素考量出的优化结果，比如：

• 对客户端操作系统而言，过多的并发涉及到端口数量和线程切换开销。
• HTTP/1.1有Keep Alive，支持复用现有连接，等请求返回回来后，再复用连接请求可以快很多。
• 将所有请求一起发给服务器，也很可能会引发服务器的并发阈值控制而被BAN。

也并不是浏览器限制并发了，我们就没别的办法了。提升页面打开速度的技术有很多，常见的：

• domain hash：对资源做哈希，请求到不同的域下面。
• cookie free：前后端分离，减少不必要的cookie提交。
• css sprite：将零星的图片整合到一张大图中，减少请求次数。
• js/css combine：资源合并，减少请求次数，不过也会增加文件修改的几率。
• max expires time：合理设置客户端缓存时间。
• loading images on demand：图片按需加载。

域名发散与收敛

• 域名发散：

  因为浏览器对同一域名下的最大连接数做了限制，为了让浏览器并发加载，将资源分散到不同域名下，缺点是需要DNS解析更多的域名。

• 域名收敛：

  在移动场景下，为了解决DNS解析耗时问题，将资源汇总到一个或更少的域名下。

参考资料：

https://www.zhihu.com/question/20474326

http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/