前端性能优化之——浏览器http请求并发

一、什么是http请求并发

随着现在的网页设计的越来越炫酷，功能越来复杂。伴随着的是网页加载的资源越来越多，常常一个页面加载的CSS、JS、图片、接口等超过几十上百个。
但其实，在客户端，浏览器并不一定会对每个资源开个连接去请求加载，是有并发限制的
总的来说：

• 同一域名下，同一GET请求的并发数是1，也就是说上一个请求结束，才会执行下一个请求，否则置入队列等待发送；
• 同一域名下，不同GET/POST请求的并发数量是6。当发送的请求数量达到6个，并且都没有得到响应时，后面的请求会置入队列等待发送。

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

• 并发量太大，容易导致客户端、浏览器、甚至是服务器挂掉
• 过多的并发涉及到端口数量和线程切换开销。
• HTTP/1.1有Keep Alive，支持复用现有连接，等请求返回回来后，再复用连接请求可以快很多。

二、http/https的并发限制数量表

Browser	BrowseHTTP/1.1	HTTP/1.0
IE 6,7	2	4
IE 8	6	6
Firefox 1.5, 2	2	8
Firefox 3	6	6
Safari 3,4	4	4
Chrome 1,2	6	?
Chrome 3	4	4
Chrome 4+	6	?
Opera 9 ,10	4	4
Opera 10.51+	8	?
Safari 3	4	?
iPhone 4+	4	?

三、websocket的并发限制数量表

Browser	websocket
IE	6
Firefox	200
Safari(mac)	1273
chrome	256

四、前端如何优化

1、减少网络请求数：

• 配置304请求，提高请求速度(这属于后端配置)
• 将图标合成雪碧图，减少图片数量，减少http请求数
• 使用webpack合并css和js，减少文件数量，减少http请求数
• vue使用动态路由，实现按需导入js，减少http请求数

2、增加静态资源来源

• 将静态资源分布在不同的服务器中，使用多个域名，加大并发量
• 将静态资源和html文档分放在不用的域名下也有另一个原因，每次页面请求都会将相同域名下的cookie带给服务器端，实际上静态资源带上cookie