http1.1相对http2有哪些不足

Posted 2021-04-18 nodejs全栈开发

题图 From Bing From Clm

服务器搭建完成之后，我们在public文件夹新建一个页面，这个页面中的资源主要由图片、css、js构成，代码如下:

观察html部分我们发现，页面设置了许多img标签，此时我们访问这个页面，观察浏览器的network，截图如下：

仔细观察其规律，浏览器请求图片资源时，最大并发数为6，这里要解释一下，浏览器针对同一个域名的网站最大的tcp链接数是根据浏览器规定的，谷歌浏览器默认的针对同一个域名的最大tcp链接数是6，这样的话页面中所有的图片资源，必须通过这6个tcp长连接来完成请求响应。

这里有一个比较形象的比喻，假如有一百个人要往返跨过一条河，河面上有6座桥，每座桥每次只能有一个人通过，那么同一时刻最多只能6个人同时过河，不能再多了，http1.1协议下的请求响应就是基于这个模型的。

在这里引入一个名词RTT：RTT(Round-Trip Time): 往返时延。在计算机网络中它是一个重要的性能指标，表示从发送端发送数据开始，到发送端收到来自接收端的确认（接收端收到数据后便立即发送确认），总共经历的时延。

一个http请求响应最少要经历一个RTT，如果这个请求或者响应携带的数据量比较大，那么可能会需要经历多次传输，也就是需要经历多个RTT，我们这里简单计算，假设一个http请求只需要一个RTT，一个RTT所用时间为n秒。

如果在一个页面中只一个TCP长连接，现在100个资源所用时间为100*RTT*n，如果用6个TCP链接，那么时间缩短为100*RTT*n/6。

在http1.1协议下，针对浏览器对每个域名最大并发数的限制，我们可以利用域名分片的技术来进一步缩短时间，什么叫域名分片呢，给同一个网站设置多个域名，比如a.com和b.com都指向同一个网站，这样浏览器对同一个网站的最大并发数就会随着域名的增加而增加，时间进一步缩短为：100*RTT*n/(6*域名个数)。

但是，随着域名增多也会出现一些问题：

1、服务器压力增大。

2、浏览器解析域名也会花费时间，域名越多花费时间也越多。

上文关注的的技巧主要是利用浏览器的特性突破了其最大并发数，但是这样做治标不治本。

TCP本身存在一些问题，如慢启动，当网速发生变化时，TCP的速度也会随之波动，速度同样受影响。

TCP本身存在竞争关系，多个tcp同时连接会互相抢占网速。最重要的一点是：基于http1.1的tcp长连接有队头阻塞的现象，如果你不明白什么是http1.1的队头阻塞，欢迎阅读这篇文章：。

聊完http1.1协议下浏览器TCP连接的特性，咱们来思考一个问题：页面解析过程中最先需要加载的是什么文件呢？ 

当然是CSS文件和js文件，但是大家思考一下css文件和js文件是什么时候加载的，是在html文件这个响应完成之后，浏览器快速扫描页面中的关键资源，而后下载js和css。这中间就可能出现一个空闲时间，这个空闲时间有两种可能，html中标签太多，解析比较费劲，虽然css下载完成但是依然需要等待DOM解析完成，另外一种是DOM解析完成CSS却没有下载完成，依然需要等待，这里无论我们怎么做，两者基本不会同步，我们应该如何做呢？在http1.1版本下我们能做的就是尽量缩短关键资源的加载，不管是html、css还是js。

在http1.1协议下，我们可以通过如下几种方案来做：

1、压缩代码，去掉注释

2、对不依赖dom的js文件合理应用async和defer避免dom解析的阻塞

3、对css应用媒体查询，对某些特定场景的css避免加载。

4、合理调整文件的个数和大小，这里不能一味的合并所有css或者js，如果某个css或者js体积过大，同样影响效率，只能不断的调整测试。本质就是减少资源加载花费的RTT，并且不要超过浏览器对同一域名最大的并发数。

5、合理利用CDN。

6、应用域名分片技术。

以上便是今天文章的内容，总结一下：

1、在http1.1版本中我们可以针对浏览器对同一个域名支持的最大TCP链接数这个特性，使用域名分片技术来加快资源下载，但是这样会也会随之带来一些问题，服务器压力增大，浏览器解析域名花费时间增多，看似并没有很好的解决我们的问题。

2、http1.1中的TCP长连接存在队头阻塞的问题，针对同一个tcp链接中的每一http请求必须响应之后后面的http才能继续。

3、TCP本身的一些不好的特性，慢启动，多条TCP链接竞争网速。

针对这些问题我们给出了一下解决方案，但是终归不是太优雅，随着互联网的高速发展http1.1似乎越来越不能满足当下用户的需求了，http2在这众望所归的时刻到来了，下篇文章带领大家利用http2来改善http1.1的这些不足。

最后提两个问题，在http1.1版本中我们能实现如下需求吗？

1、假如页面中要加载多个资源，有的资源比较重要，我们想要使其优先加载，应该怎么做呢？

2、当我们请求某个网址的时候，服务器能不能提前将页面需要的重要资源推送过来，而不是等待浏览器扫描html后再去加载？

3、既然多个TCP链接存在竞争关系，我们能不能让浏览器将针对同一个域名的所有http请求都基于同一个tcp链接呢？这样既减少了竞争，也减少了tcp链接的耗时操作。

如果你有什么建议或者想法欢迎留言。