前端基础进阶（二十七）：HTTP2,HTTP3,HTTPS,Websocket,TCP和UDP

一、http1

缺陷

1 高延迟-队头阻塞(Head-Of-Line Blocking)

网络延迟问题主要由于队头阻塞(Head-Of-Line Blocking),导致带宽无法被充分利用。
队头阻塞是指当顺序发送的请求序列中的一个请求因为某种原因被阻塞时，在后面排队的所有请求也一并被阻塞，会导致客户端迟迟收不到数据。针对队头阻塞,人们尝试过以下办法来解决:
解决方法：
1 将同一页面的资源分散到不同域名下，提升连接上限。
2 spriting合并多张小图为一张大图,再用JavaScript或者CSS将小图重新“切割”出来的技术。
3 将图片的原始数据嵌入在CSS文件里面的URL里，减少网络请求次数。
4 使用webpack等工具打包

2 无状态特性--带来的巨大HTTP头部

3 明文传输--带来的不安全性

4 不支持服务器推送消息

二、http2

简介：

HTTP/2基于SPDY，专注于性能，最大的一个目标是在用户和网站间只用一个连接（connection）。

特性：

1.二进制传输

2.Header 压缩

3.多路复用

4 Server Push

5 提高安全性（二进制传输+加密）

缺陷:

1 TCP 以及 TCP+TLS建立连接的延时

2 TCP的队头阻塞并没有彻底解决

三、HTTP/3

QUIC 基于 UDP,而UDP是“无连接”的，根本就不需要“握手”和“挥手”，所以就比TCP来得快。此外QUIC也实现了可靠传输，保证数据一定能够抵达目的地。它还引入了类似HTTP/2的“流”和“多路复用”，单个“流"是有序的，可能会因为丢包而阻塞，但其他“流”不会受到影响。具体来说QUIC协议有以下特点：
1 实现了类似TCP的流量控制、传输可靠性的功能
2 实现了快速握手功能
3 集成了TLS加密功能
4 多路复用，彻底解决TCP中队头阻塞的问题
参考网址：
解密HTTP/2与HTTP/3 的新特性

四、HTTPS（SSL）

http存在的问题：

1. 通信使用明文（不加密），内容可能被窃听(信息窃听)
2. 无法证明报文的完整性，所以可能遭篡改（信息篡改）
3. 不验证通信方的身份，因此有可能遭遇伪装（信息劫持）

https:

1. 数据隐私性：内容经过对称加密，每个连接生成一个唯一的加密密钥
2. 数据完整性：内容传输经过完整性校验
3. 身份认证：第三方无法伪造服务端（客户端）身份

参考网址：
深入理解HTTPS工作原理

五、TCP和UDP比较

相同点：都是位于传输层

不同点：

udp：

1 面向无连接
首先 UDP 是不需要和 TCP一样在发送数据前进行三次握手建立连接的，想发数据就可以开始发送了。并且也只是数据报文的搬运工，不会对数据报文进行任何拆分和拼接操作。
2 有单播，多播，广播的功能
3 UDP是面向报文的
4 不可靠性
首先不可靠性体现在无连接上，通信都不需要建立连接，想发就发，这样的情况肯定不可靠。
并且收到什么数据就传递什么数据，并且也不会备份数据，发送数据也不会关心对方是否已经正确接收到数据了。
5 头部开销小，传输数据报文时是很高效的。

tcp

1 面向连接
2 仅支持单播传输
3 面向字节流
4 可靠传输
5 提供拥塞控制
6 TCP提供全双工通信

参考网址：
TCP和UDP比较

六、 websocket

HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。在WebSocket协议之前，有三种实现双向通信的方式：轮询（polling）、长轮询（long-polling）和iframe流（streaming）。

1.轮询（polling）

轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。其缺点也很明显：连接数会很多，一个接受，一个发送。而且每次发送请求都会有Http的Header，会很耗流量，也会消耗CPU的利用率。

• 优点：实现简单，无需做过多的更改
• 缺点：轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担

2.长轮询（long-polling）

长轮询是对轮询的改进版，客户端发送HTTP给服务器之后，看有没有新消息，如果没有新消息，就一直等待。当有新消息的时候，才会返回给客户端。在某种程度上减小了网络带宽和CPU利用率等问题。由于http数据包的头部数据量往往很大（通常有400多个字节），但是真正被服务器需要的数据却很少（有时只有10个字节左右），这样的数据包在网络上周期性的传输，难免对网络带宽是一种浪费。

• 优点：比 Polling 做了优化，有较好的时效性
• 缺点：保持连接会消耗资源; 服务器没有返回有效数据，程序超时。

3.iframe流（streaming）

iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。

• 优点：消息能够实时到达；浏览器兼容好
• 缺点：服务器维护一个长连接会增加开销；IE、chrome、Firefox会显示加载没有完成，图标会不停旋转。

4 websocket

由于是建立在HTTP基础上的协议，因此连接的发起方仍是客户端，而一旦确立WebSocket通信连接，不论服务器还是客户端，任意一方都可直接向对方发送报文。初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？ HTTP是半双工协议，也就是说，在同一时刻数据只能单向流动，客户端向服务器发送请求(单向的)，然后服务器响应请求(单向的)。 服务器不能主动推送数据给浏览器。这就会导致一些高级功能难以实现，诸如聊天室场景就没法实现。

参考网址：
Web 实时推送技术的总结

从URL输入到页面展现到底发生什么？