1. 导读
当我们在使用chrome浏览器(大多数浏览器)时,默认使用的http1.1的协议。在控制台里面查看静态资源(比如图片、js文件)的的请求头,点击view source可以很直观的看到。
2. http1.1的特点
我们知道http1.1有个特点,就是必须前一个请求回来之后,第二个请求才会发送,这就很容易造成【队头阻塞】,但是我们在正常写页面的时候,发现好像这些接口都是一起发送的,这就要涉及到浏览器的并发连接。
3. 浏览器的并发连接
- 所谓的并发连接,就是对同一个域名发起多个长连接,用数量解决质量的问题。
- 但是并发连接并不是可以想发起多少个就发起多少个,这对带宽和服务器都有影响,所以现在大多数浏览器发起的连接个数都是6~8个,chrome是6个
4. 为什么图片上传时最好上传到多个子域名下
因为连接个数限制是针对于浏览器与每个域名的限制的,有2个域名,最多就可以发起12个,所以把图片放到不同域名下可以达到一次性请求更多图片的目的。下面是慕课网的图片地址。
img1.mukewang.com/szimg/5d142… img3.mukewang.com/szimg/5d2e7…
5. 设计实验
通过wireshark抓取http请求
- html的内容如下,一共请求了11张图片,然后启动一个本地服务(我用的是anywhere)
- 使用wireshark抓包,抓包的内容如下
一来我们就看到了两次tcp连接
- 对抓包的数据进行整理
58405 和 8090 三次握手
58406 和 8090 三次握手
通过 58406 请求html
58406响应
通过 58406 请求 1.png
58406响应
通过 58406 请求 2.png
58406响应
通过 58406 请求 3.png
58407 和 8090 三次握手
58406响应
通过 58405 请求 4.png
58408 和 8090 三次握手
58405响应
58409 和 8090 三次握手
58410 和 8090 三次握手
通过 58407 请求 5.png
通过 58408 请求 6.png
58407响应
58408响应
通过 58409 请求 7.png
通过 58410 请求 8.png
58409响应
58410响应
通过 58410 请求 9.png
通过 58409 请求 10.png
58410响应
通过 58408 请求 11.png
58409响应
58408响应
注意:如果图片的返回是流的形式,那么可以采用引入js脚本的形式进行测试,例如:<script src="./1.js"></script>
6. 结论
我们可以得出以下结论:
- 总共有6个端口与8090进行了握手,也就是58405 ~ 58410,也就是说产生了6个tcp连接。(也证明了chrome浏览器的并发连接限制个数)
- 每一个tcp连接都要完成3次握手
- 对于同一个tcp连接,必须是前一个返回之后,后面的才能重新发起请求。
- 各tcp之间的http的顺序并没有相互影响。