【每日一题】(42题)谈谈你对Http2.0的理解?

关注「松宝写代码」，精选好文，每日一题

作者： saucxs

愿努力拼搏的你，都能在前进的道路上有所收获！

---

一、前言

HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。

在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。

二、HTTP 2.0

感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少，地址：https://http2.akamai.com/demo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XocreBrn-1612487961551)(https://www.mwcxs.top/static/upload/pics/2019/2/27je25knoGpQArCVwTDdvSl_dQ.png)]

在 HTTP 1.X 中，因为队头阻塞的原因，你会发现请求是这样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESTMpxgV-1612487961552)(https://www.mwcxs.top/static/upload/pics/2019/2/27ygMX6rQ6vGiREB4e-0nJv_HV.png)]

在 HTTP 2.0 中，因为引入了多路复用，你会发现请求是这样的

三、HTTP 2.0核心

3.1 二进制传输

HTTP 2.0中所有加强性能的核心带你在于此–二进制传输。

之前的HTTP的版本中，我们传输数据方式–文本传输。

在HTTP 2.0中引入了新的编码机制，所有传输的数据都会被分隔，并采用二级制格式编码。

3.2 多路复用

在 HTTP 2.0 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。

帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。

多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

3.3 Header压缩

在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。

在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。

3.4 服务端push

在 HTTP 2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。

可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch 。

3.5 QUIC

这是一个谷歌出品的基于 UDP 实现的同为传输层的协议，目标很远大，希望替代 TCP 协议。

1、该协议支持多路复用，虽然 HTTP 2.0 也支持多路复用，但是下层仍是 TCP，因为 TCP 的重传机制，只要一个包丢失就得判断丢失包并且重传，导致发生队头阻塞的问题，但是 UDP 没有这个机制

2、实现了自己的加密协议，通过类似 TCP 的 TFO 机制可以实现 0-RTT，当然 TLS 1.3 已经实现了 0-RTT 了

3、支持重传和纠错机制（向前恢复），在只丢失一个包的情况下不需要重传，使用纠错机制恢复丢失的包。纠错机制：通过异或的方式，算出发出去的数据的异或值并单独发出一个包，服务端在发现有一个包丢失的情况下，通过其他数据包和异或值包算出丢失包。在丢失两个包或以上的情况就使用重传机制，因为算不出来了。

往期「每日一题」

1、JavaScript && ES6

• 第 41 题：【每日一题】(41题)JS代码到底是如何被压缩的?

• 第 40 题：【每日一题】(40题)关于script标签，你可能不知道的地方？

• 第 39 题：【每日一题】(39题)谈谈JS的函数扩展？

• 第 30 题：【每日一题】(30题)面试官:ES6的解构赋值的理解？

• 第 28 题：【每日一题】(28题)面试官:原型链与构造函数结合方法继承与原型式继承的区别？

• 第 22 题：【每日一题】(22题)面试官问：var与const,let的主要区别是什么？

• 第 21 题：【每日一题】(21题)面试官问：谈谈JS中的 this 的绑定？

• 第 20 题：【每日一题】(20题)面试官问：谈谈JS中的 webSockets 的理解？

• 第 19 题：【每日一题】面试官问：谈谈JS中的 XMLHttpRequest 对象的理解？

• 第 18 题：【每日一题】面试官问：JS中的 Ajax 跨域与扩展 Comet ？

• 第 17 题：【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？

• 第 16 题：【每日一题】面试官问：JS中如何全面进行客户端检测？

• 第 15 题：【每日一题】面试官问：JS类型判断有哪几种方法？

• 第 14 题：【每日一题】面试官问：谈谈你对JS对象的创建和引申

• 第 13 题[每日一题]面试官问：[‘1’, ‘2’, ‘3’].map(parseInt)输出，原因，以及延伸？

• 第 12 题[每日一题]面试官问：JS引擎的执行过程（二）

• 第 11 题[每日一题]面试官问：JS引擎的执行过程（一）

• 第 10 题[每日一题]面试官问：详细说一下JS数据类型

• 第 8 题[每日一题]面试官问：谈谈你对ES6的proxy的理解？

• 第 7 题[每日一题]面试官问：for in和for of 的区别和原理？

• 第 6 题[每日一题]面试官问：Async/Await 如何通过同步的方式实现异步？

• 第 3 道「「每日一题」面试官问你对 Promise 的理解？可能是需要你能手动实现各个特性」

• 第 2 道「[每日一题]ES6 中为什么要使用 Symbol？」

2、浏览器

• 第 9 题[每日一题]requestAnimationFrame不香吗？

3、Vue

• 第 5 道「每日一题」到底该如何回答：vue数据绑定的实现原理？

4、React

• 第 38 道【每日一题】(38题)谈谈React Hooks 与Vue3.0 Function based API的对比？

5、HTML5

• 第 29 道【每日一题】(29题)面试官:HTML-HTML5新增标签属性的理解？

6、算法

• 第 37 道【每日一题】(37题)面试官:你对图论了解多少？(七)

• 第 36 道【每日一题】(36题)面试官:你对图论了解多少？(六)

• 第 35 道【每日一题】(35题)面试官:你对图论了解多少？(五)

• 第 34 道【每日一题】(34题)面试官:你对图论了解多少？(四)

• 第 33 道【每日一题】(33题)面试官:你对图论了解多少？(三)

• 第 32 道【每日一题】(32题)面试官:你对图论了解多少？(二)

• 第 31 道[【每日一题】(31题)面试官:你对图论了解多少？(一)

• 第 27 道【每日一题】(27题)算法题:如何使用多种解决方案来实现跳一跳游戏？

• 第 26 道【每日一题】(26题)算法题:最长公共前缀？

• 第 25 道【每日一题】(25题)算法题:堆数据结构-前 K 个高频元素？

• 第 24 道【每日一题】(24题)算法题:贪心算法-环游世界之如何加油？

• 第 4 道「每日一题」与面试官手撕代码：如何科学高效的寻找重复元素？

7、Node

• 第 23 道【每日一题】(23题)面试官问：详细描述事件循环Event Loop？

8、Http

• 第 1 道「一道面试题是如何引发深层次的灵魂拷问？」

谢谢支持

1、文章喜欢的话可以「分享，点赞，在看」三连哦。

2、作者昵称：saucxs，songEagle，松宝写代码。「松宝写代码」公众号作者，每日一题，实验室等。一个爱好折腾，致力于全栈，正在努力成长的字节跳动工程师，星辰大海，未来可期。内推字节跳动各个部门各个岗位。

3、长按下面图片，关注「松宝写代码」，是获取开发知识体系构建，精选文章，项目实战，实验室，每日一道面试题，进阶学习，思考职业发展，涉及到JavaScript，Node，Vue，React，浏览器，http，算法，端相关，小程序等领域，希望可以帮助到你，我们一起成长～

标签：面试官,HTTP,每日,42,JS,传输,谈谈,2.0,Http2.0
来源： https://blog.csdn.net/chengxin123456789/article/details/113676925