HTTP2的一点浅显理解

cvSoldier
如有错误 非常欢迎指正

http2.0 比 1.x 快在哪儿

2.0 性能增强的核心在于全新的二进制分帧层,它定义了如何封装http消息并在客户端和服务端之间传输。
1.x 中以换行符作为分隔符,2.0 将信息分割为更小的消息和帧,并进行二进制编码,再将这些独立的帧交错发送,再另一端重组,解决了1.x中存在的队首阻塞。(无端联想:重组时候是不是使用类似二叉堆的数据结构)
(解决了http的队首阻塞,但TCP层的依然存在)

所有的通信都在一个TCP连接上完成。
1.x中如果客户端要发送多个并行的请求,必须使用多个TCP链接。直接导致TCP链接的效率低。

HTTP的每次通信都会携带header,在1.x中,这些数据都是通过纯文本形式发送的,通常会给每个请求增加500-800字节的负荷,如果算上cookie,负荷会更大。2.0会进行首部压缩。
首部压缩是指在客户端和服务器会使用“首部表”来跟踪之前发送的键值对,对于相同的数据,不再通过每次请求和响应携带。如图
image
(我傻了吧唧的一开始以为是gzip那种压缩)
在vue后台管理的工程中,封装axios使所有请求携带的token,同时也增大了所有请求,首部压缩完美解决。

http2.0 优化方式有哪些改变

首先不管什么协议,1降低网络延迟,2减少传输数据,这是基础。

在1.x的时代,把多个文件打包成一个以减少请求数量是一个很常用的方式,这种方式就像是使用了http管道,多个数据连在一起,消除了额外的网络延迟,实际就是把管道从传输层提升到了应用层。
这种方式的问题在于打包粒度,以雪碧图为例,工程里的小图打包成了一张,也就意味了如果其中一部分被替换了,用户就需要重新下载整张,在粒度上抠细节可以帮助网页实现递增式加载,但代价是代码的复杂程度(以及无辜的头发),只是权宜之计。在2.0中 就完全可以去掉不必要的打包了。
比如首屏渲染最开始只有一个 home.js ,然后做了骨架屏,拆成了 骨架屏.js + home.js ,想继续拆成 骨架屏.js + 基础交互.js + home.js,但是再拆可能因为额外的请求反而降低性能,在2.0中就不需要犹豫了。

在1.x中,场景是首页有一个单独的小图片,其他页面也有引用,为了首屏加载速度,不知道应该单独请求还是打包进雪碧图。2.0可以使用服务端推送来推送这些资源,直接推送进缓存,就像请求了一样,可以减少一次请求图片的消耗。不过缺点在于服务端推送是以缓存优先的,即缓存和推送同时存在时,使用缓存,而且浪费了这次推送的带宽。(可以通过检查是否携带cookie来判断是否首次访问,只在首次访问进行推送来解决)

在1.x中,可能性能受限于默认的每个来源六个链接而使用了域名分区,在2.0也可以去掉了。

阅读 836

cvSoldier前端
前端笔记、踩坑、个人理解

原地tp

116 声望
13 粉丝
0 条评论

原地tp

116 声望
13 粉丝
文章目录
宣传栏