记一次触发浏览器HTTP并行连接数的经历

3,022 阅读4分钟

1.需求背景

公司开发的直播审核后台需要把多个直播视频放在同一个页面里人工审核,防止主播太过放飞自我。

2.错误反馈

使用chrome进行调试
当上线主播个数大于6时,从第7个开始的后续主播视频都无法显示。
视频格式为flv所以用的是flv.js,报错信息为(注意:这个报错并不是播放器报错,而是视频流报错 关键字IOException

3.排查历程

报错信息显示code 403,先复习一下403是啥意思。

403 Forbidden是HTTP协议中的一个状态码(Status Code)。可以简单的理解为没有权限访问此站。该状态表示服务器理解了本次请求但是拒绝
执行该任务,该请求不该重发给服务器。在HTTP请求的方法不是“HEAD”,并且服务器想让客户端知道为什么没有权限的情况下,服务器应该在返
回的信息中描述拒绝的理由。在服务器不想提供任何反馈信息的情况下,服务器可以用404 Not Found代替403 Forbidden。

由于显示错误代码403,所以一开始猜测是可能是服务端有风控措施,同一用户请求视频流太多拒绝。同事帮助联系了下供应商,得到的回应是没有任何限制。
恰巧这几天正在看《http权威指南》,模模糊糊记得http请求有最大并行连接数的知识(引用列表1),遂翻书:

HTTP允许客户端打开多条连接,并行地执行多个HTTP事务。  

即使并行连接的速度可能会更快,但并不一定总是更快。客户端的网络带宽不足时,大部分的时间可能都是用来传送数据的,这种情况下,一个
连接到速度较快服务器上的HTTP事务就会很容易地耗尽所有可用的Modem带宽。如果并行加载多个对象,每个对象都去竞争这有限的带宽,每个对
象都会以较慢的速度按比例加载,这样带来的性能提升就很小,甚至没什么提升。  

而且,打开大量连接会消耗很多内存资源,从而引发自身的性能问题。  

浏览器确实使用了并行链接,但它们会将并行连接的总数限制为一个较小的值(通常是4个)。服务器可以随意关闭来自特定客户端的超量连接。

总结一下就是:

HTTP为了性能优化,可以同时执行多个HTTP事务来优化体验,但由于带宽和内存资源限制,不限制并发个数也是对HTTP性能有影响的。服务端也可以关闭来自特定客户端的连接。

于是关于这个报错得出俩个猜测:
1.浏览器最大并发连接个数限制导致
2.服务器拒绝

那我们如何确定到底是服务端还是浏览器呢?

4.验证

如何验证呢? 我写了一个小demo,里边使用同一个视频流地址初始化了8个播放器对象。 可以看到video7和video8是无法展示的,这俩个视频在网络请求中查看是等待状态
等待的请求:
等待超时后:
正常的请求:
在控制台销毁播放器实例1和2后,发现刚才不能播放的播放器实例7和8立即重连了 由此可见,一个chrome浏览器进程只支持6个并发。 另外再启动一个浏览器进程,比如edge,edge这边不受6个并发限制,由此可见进程间是不影响的。

5.解决办法

一般来说我们不需要解决这个,web资源加载都是自动的,除非像我一样碰到了这样的需求。 我们可以通过变更域名来实现同时加载多个。比如: 京东图片域名一直是域名360buyimg.com。

http://img13.360buyimg.com/da/jfs/t1879/131/2924301202/126044/7c7cbf5c/56f3b58fN37c1340a.jpg

可以把前边域名中的img13,变成img1,img2,简而言之,可以把一个资源绑定到配置了多个域名的cdn来访问。

6.总结

开发过程中一些问题可能并没有接触过相关知识,我们可以用经验去猜测,然后查找对应知识,按自己的思路一步步验证。

另外我还找到一些浏览器的并发链接限制个数表。

浏览器名称HTTP1.1HTTP1.0
IE 1166
IE 1066
IE 91010
IE 866
IE 6,724
火狐66
safari3,444
chrome4+66
Opera9.63,10.00alpha44
pera 10.51+8?
iPhone 24?
iPhone 36?
iPhone 44?
iPhone 56?
Android2-44?

7.引用资料列表

1.《HTTP权威指南》第四章 4.4 并行链接
2.《浏览器同域名请求的最大并发数限制》 作者:sunsky303