前端别错过的Web性能解读之TCP

谁践踏了优雅 2023-02-26 05:27 145阅读 0赞

## 一起来读Web性能权威指南 ##

简单记一下关于TCP和一些网络技术的概况

### 先看看前言 ###

今天拜读了**grigorik的Web性能权威指南**，这本书一开始便找了一个大牛做序，而且说的是栩栩如生，引人入胜，不可否认，也吸引到我了。  
![在这里插入图片描述][20200714144304938.png]  
当我读到下面这一句，转而看了一看书是2014年出版的，就算原作者是2014年估计的把，哈哈，没想到去网上一查，今年，保守估计，750亿体量的智能设备被使用，平均一个人4台智能设备，我不仅看了一下我手边的手机，还有switch，还有pc，还有一个笔记本，好了不看了，我已经贡献超过平均值了。  
![在这里插入图片描述][20200714144729997.png]  
![在这里插入图片描述][20200714144710264.png]

### 网站越快，好处一万 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]  
第一章算开宗明义了

> 网站越快，用户粘性越高，网站越快，用户忠诚度越高，网站越快，用户转化率越高。

粘性不用说了，最近我使用的两个直播平台，不说名字了，一个我打开感觉很流畅，另一个我就卸载了。  
忠诚度感觉同上吧，没什么可说的，慢的要死谈何忠诚，转化率，不用专业的角度，某游戏平台因为用水果做服务器导致我付款都付不上，一气之下不仅不想花钱而且卸载了。  
明细两个概念问题：

> 延迟：分组从信息源发送到目的地所需的时间。  
> 是消息或分组从起点到终点经历的时间。  
> 带宽：逻辑或物理通信路径最大的吞吐量。

### 说说延迟 ###

这两个词应该我们都并不陌生，你要是陌生我和你讲一下王者荣耀的460ms和学校拉网的10M，大家应该都明白了， 说多了都是泪。之前读过一本书叫货币战争，在说过这个金融市场交易的时候可能一个1ms延迟都会产生相当大的损失，所以要尽可能的降低延迟，尽多大可能呢，就比如8000w美元降低1ms这种可能。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]  
这里的Hibernia Express 就是斥资四个亿，目的减少城市间的路由所搭建的海底光缆，最终减少了5ms的延迟。  
延迟如果严格来说应该分为几个部分，分别是传播延迟，传输延迟，处理延迟和排队延迟。  
这里很熟悉，计网应该学过的hhhhh。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]

> 1.  传播延迟：消息从发送端到接收端需要的时间
> 2.  传输延迟：把消息中的所有比特转移到链路中需要的时间
> 3.  处理延迟：处理分组首部，检查位错误及确定分组目标所需的时间
> 4.  排队延迟：到来的分组排队等待处理的时间

看起来懵懵的，整个例子大家就都懂了。  
若是从网购剖析这个问题，特别是快递行业，就清晰明了了。

> 传播延迟呢，就比如发货点和收货点之间的距离，这和距离还有用什么交通工具是有关系的（速度不同）  
> 传输延迟呢，比如你网购了一个东西，买家要给你包装，贴上相应的快递的条码，这样快递公司才能认得出  
> 处理时延就更简单了，快递公司的每个环节会检查一下，这个物件是不是违禁品啊，有没有东西坏了丢了？（字段缺失）  
> 最后一个排队时延，逢年过节，大家都网购，快递运的慢啊。

### CDN又是什么 ###

CDN这个词在学习前端框架经常会遇到，比如以CDN方式引入vue。

CDN全名，content Delivery Network 内容分发网络，服务用途最重要的就是通过把内容部署在全球各地，让用户从最近的服务器加载内容，大幅降低传播分组的时间。这种方式其实就是缩短了两者之间的距离，减少了传播时延。  
（知道玩绝地求生不开加速器会延迟很高的原因了吧）

测网速除了鲁大师一类的国产评测，`https://www.speedtest.net/` 在文中也推荐了Ookla运营的speedtest

### 总体目标：高带宽，低延迟 ###

### TCP/IP ###

而作为web开发，或多或少应该都知道IP和TCP协议，当然还有经常拿来和TCP比较的UDP协议，当我们在应用层做的某些处理可能会影响到底层网络性能的时候，这些我们也就必须要了解一下了。

#### 为什么没有IPv5 ####

> IP协议现在经常出现在我们周围，IPv6 IPv4 为什么没有1-3和5呢？

由于第四版本IPv4仅仅是代表继承前三个版本，前三个版本并没有独立发布，所以也就并没有IPv1-3，而第五号版本分配给了一个适应性协议ST，而ST一直并没有进展和声明，所以当版本迭代的时候就迭代到了v6.

#### TCP Fast Open ####

#### 拥塞预防及控制 ####

ok，举个栗子。一到大厂送游戏，白嫖 的时候，有没有进不去，刷不出页面？

##### 流量控制 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]

###### 通告接收窗口(rwnd) ######

最初的TCP规范分配给通告窗口大小的字段是16位的，这相当于设定了发送端和接收端窗口的最大值。  
在带宽延迟积很大的网络中，比如xxx网络，100M，延迟500ms，在这个限制经常获得不了最优性能。

**解决：**  
TCP Windows Scaling 选项  
可将原本接收窗口大小由65535字节，提高到1G字节，缩放TCP窗口是在三次握手期间完成的，其中有一个值表示在将来的ACK中左移16位窗口字段的位数。  
现在，此机制在主要平台都是默认启动的，中间节点和路由器可以重写和控制。  
提高窗口字节数量。

##### 慢启动和cwnd #####

根据交换数据来估算客户端与服务器之间的可用带宽是唯一方法。  
服务器通过TCP连接初始化一个新的\*\*拥塞窗口(cwnd),\*\*将其设置为一个系统设定的保守值。  
客户端和服务器之间最大可以传输的数据量取rwnd和cwnd变量中的最小值。  
连接确立后，不可能直接了解带宽和其他网络因素，从开始到完全利用连接的最大带宽需要时间过程。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]  
开始慢启动以指数增长到（数据包丢失或超出流量控制窗口rwnd）,成倍减少（AIMD倍减加增），之后拥塞预防算法介入。

##### 拥塞预防 #####

> 介入标志：丢包。

AIMD（Multiplicative Decrease and Additive Increase）:倍减加增。如上图所示，在丢包后进行倍数递减后增加某个固定参数恢复传输。

PRR（Proportional Rate Reduction）：比例降速，由于AIMD的保守性，RFC6937重新规定了一个新的算法，改进丢包后的恢复速度。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]

#### 带宽延迟积 ####

BDP：（Bandwidth-delay product） ：  
数据链路的容量与其端到端延迟的乘积，这个结果就是任意时刻处于在途中未确认状态的最大数据量。  
带宽×延迟

##### 计算最大吞吐量和窗口大小 #####

###### 最大吞吐量的影响因素 ######

*  往返时间（反比）
 *  最小窗口值（正比）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 6]

###### 窗口大小计算 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 7]  
也就是说至少122.1KB的窗口才可以充分利用10Mbit的带宽，在之前改变rwnd大小的解决办法就运用在这里。

### 情境下比TCP更优的选择------UDP ###

> 无需按序交付数据或能够处理分组丢失的应用程序，以及对延迟或抖动要求很高的 应用程序，最好选择 UDP 等协议。

比如 qq 微信等即时通讯工具。

### 把丢包看作一种反馈机制 ###

丢包在TCP中恰恰是为了寻找最优的传输速率和窗口而产生的，使发送端和接收端调整各自的速度，以避免网络拥堵，保持最优延迟的过程。

[20200714144304938.png]: /images/20230209/ca4773a3c8d6437193e84aa38e1706a9.png
[20200714144729997.png]: https://img-blog.csdnimg.cn/20200714144729997.png
[20200714144710264.png]: https://img-blog.csdnimg.cn/20200714144710264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200714145753383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200714151255486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200714152003849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200714165442625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020071509354187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200715094417290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200715100039807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020071510033272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70