http连接的connection:keep-alive可以建立客户端和服务端持久化连接，该连接在请求结束之后不会断开tcp连接
这句被嚼烂的话下面隐藏的问题，你不一定知道答案。
我们都知道，HTTP1.0以前，http连接默认都是非持久化的。到了HTTP1.1，服务端和客户端都默认开启持久化连接，即使你在头部没看到connection:keep-alive，如果你有看到，那是为了兼容HTTP1.0。
那么问题来了。
一个tcp连接同时可以发送几个http请求？
HTTP1.1及以下的版本，一个tcp连接不能并发处理多个http请求。即，如果一个http请求未结束，该tcp连接无法发起下一个http请求。
那有人纳闷了，为什么我的浏览器可以同时请求了多个相同服务器的资源？
其实，浏览器是可以针对同一个资源地址建立多个tcp连接的。验证方式就是关掉浏览器（强行断开持久化连接）再打开该页面，查看Network 的waterfall，看看是否有2个以上的同域资源建立了Initial connection，如下图：
当你刷新页面的时候，相同的请求已经没了Initial connection过程，说明持久化连接还在生效。
浏览器对同一个服务器支持同时建立多少个tcp连接呢？
这个要看浏览器了。
你可能知道有个浏览器最大连接数的概念，即浏览器支持对同一个域名同时建立多少个http连接。
个人认为，如果是从HTTP1.1考虑的话，它其实等同于浏览器对同一个域名支持同时建立多少个tcp连接数，毕竟HTTP1.1版本一个tcp连接只能同时处理一个http请求。
Firefox 2: 2
Firefox 3+: 6
Opera 9.26: 4
Opera 12: 6
Safari 3: 4
Safari 5: 6
IE 7: 2
IE 8: 6
IE 10: 8
Chrome: 6
以上是从stackoverflow粘贴过来的信息。
为什么资源并发比较多的网站，用户体验很差，如页面初始化请求大量静态资源。了解了以上这些知识，我们可以通过将资源分布在不用域名，比如说CDN，来解决这个问题。
但是其实浏览器对所有域名的总连接数也有限制：
| Browser | Connections per Domain | Max Connections |
| -------------------- | ------------------------------ | ------------------------------ |
| Chrome 81 | 6 [^note1] | 256[^note2] |
| Edge 18 | *same as Internet Explorer 11* | *same as Internet Explorer 11* |
| Firefox 68 | 9 [^note1] or 6 [^note3] | 1000+[^note2] |
| Internet Explorer 11 | 12 [^note4] | 1000+[^note2] |
| Safari 13 | 6 [^note1] | 1000+[^note2] |
除了资源分布在不同域名上之外，我们可以将资源合并。总所周知的雪碧图、webpack资源打包。
说起webpack资源打包，最近，vite作为和vue3.0的一起出现的打包工具，让大家看到借助浏览器ESModule能力实现Bundleless打包的优点。 目前主流浏览器都支持ESModule了。但是由于ESModule的模块化特点，显然资源并发请求是它的一个大问题，将来怎么发展还不确定。Webpack 打包太慢？来试试 Bundleless这篇文章可以帮助你对ESModule有基础的认知。
HTTP2 提供了 Multiplexing 多路传输特性，可以在一个 TCP 连接中同时完成多个 HTTP 请求，目前部分主流网站开始部分支持http2.0。
tcp连接何时关闭？
你或许看到过这句话：如果连接是keep-alive的，那么tcp连接不会主动断开，除非客户端或服务端至少有一端声明了connection:close。
其实服务端可以为keep-alive设定tcp最长保持时间，返回头部类似这样：
Connection: Keep-Alive
Keep-Alive: max=5, timeout=120
如果没有设置，则使用默认值，nginx为75s。
你可以尝试建立一个持久连接，等待几分钟后刷新页面，会发现所有服务器的连接重新建立。
参考资料：
https://developers.google.com/web/tools/chrome-devtools/network/issues#queued-or-stalled-requestsdevelopers.google.com
https://mp.weixin.qq.com/s/kJy_-RfUhmTsVB1l_SJDmw
https://mp.weixin.qq.com/s/EkWOXAcuzkUexWAyra_PwA
https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x
https://juejin.cn/post/6844903652964958216
本文使用 mdnice 排版
