聊聊浏览器并发请求限制

随着现在的网页设计的越来越炫酷,功能越来越丰富。伴随着的是网页加载的资源越来越多,常常一个页面加载的 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/