服务器端页面被送达到浏览器用的协议-TCP协议

女爷i 2023-07-10 12:58 75阅读 0赞

在衡量Web页面性能的时候有个重要的指标叫"**FP（First Paint）**"，是**指从页面加载到首次开始绘制的时长**。这个指标直接影响了用户的跳出率，更快的页面响应意味着更多的PV、更高的参与度，以及更高的转化率。那什么影响FP指标呢？其中一个重要的因素是**网络加载速度**。

我们知道，网页在传输过程中使用的是TCP/IP协议，HTTP、WebSocket都是基于这个协议的。在网络中，一个文件通常会被拆分为很多数据包来传输，而数据包在传输过程中又有很大概率丢失或者出错。**那么如何保证页面文件能被完整地送达浏览器呢？**

## 一个数据包的"旅程" ##

**互联网，实际上是一套理念和协议组成的体系架构**。其中，协议是一套众所周知的规则和标准，如果各方都同意使用，那么它们之间的通信将变得毫无障碍。

**1.IP：把数据包送达目标主机**

数据包要在互联网上进行传输，就要符合**网际协议**（Internet Protocol，简称**IP**）标准。互联网上不同的在线设备都有唯一的地址，地址只是一个数字，这和家庭收件地址类似，你只需要知道一个家庭的具体地址，就可以往这个地址发送包裹，这样物流系统就能把物品送到目的地。

**计算机的地址就称为IP地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息。**

如果要把一个数据包从主机A发送给主机B，那么在传输之前，数据包会被附上主机B的IP地址信息，这样在传输过程中才能正确寻址。额外地，数据包上还会附上主机A本身的IP地址，有了这些信息主机B才可以回复信息给主机A。这些附加的信息会被装进一个叫IP头的数据结构里。IP头是IP数据包开头的信息，包含IP版本、源IP地址、目标IP地址、生存时间等信息。

我们先把网络简单地分为三层结构，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70]  
我们一起来看下一个数据包从主机A到主机B的旅程：

*  上层将含有"测试数据"的数据包交给网络层；
 *  网络层再将IP头附加到数据包上，组成新的**IP数据包**，并交给底层；
 *  底层通过物理网络将数据包传输给主机B；
 *  数据包被传输到主机B的网络层，在这里主机B拆开数据包的IP头信息，并将拆开来的数据部分交给上层；
 *  最终，含有"测试数据"信息的数据包就到达了主机B的上层了。

**2.UDP：把数据包送达应用程序**

IP是非常底层的协议，只负责把数据包传送到对方电脑，但是对方电脑并不知道把数据包交给哪个程序。因此，需要基于IP之上开发能和应用程序打交道的协议，最常见的是"**用户数据包协议**（User Datagram Protocal）"，简称**UDP**。

UDP中一个重要的信息是**端口号**，端口号其实就是一个数字，每个想访问网络的程序都需要绑定一个端口号。通过端口号UDP就能把指定的数据包发送给指定的程序了，所以**IP通过IP地址信息把数据发送给指定的电脑，而UDP通过端口号把数据包分发给正确的程序**。和IP头一样，端口号会被装进UDP头里面，UDP头再和原始数据包合并组成新的UPD数据包。

现在，就成了四层网络结构了，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70 1]  
下面我们一起看下一个数据包从主机A到主机B的路线：

*  上层将含有"测试数据" 的数据包交给传输层；
 *  传输层会在数据包前面附加上UDP头，组成新的UDP数据包，再将新的UDP数据包交给网络层；
 *  网络层再将IP头附加到数据包上，组成新的IP数据包，并交给底层；
 *  数据包被传输到主机B的网络层，在这里主机B拆开IP头信息，并将拆开来的数据部分交给传输层；
 *  在传输层，数据包中的UDP头会被拆开，并**根据UDP中所提供的端口号，把数据部分交给上层的应用程序**；
 *  最终，含有"测试数据"信息的数据包就旅行到了主机B的上层应用程序这里。

我们知道，UDP可以校验数据是否正确，但是对于错误的包，UDP并不提供重发机制，只是丢弃当前的包，而且UPD在发送之后也无法知道是否能达到目的地。

**3.TCP：把数据完整地送达应用程序**

对于浏览器请求，使用UDP传输存在两个问题：

*  数据包在传输过程中容易丢失
 *  大文件会被拆分成很多小文件来传输，这些小的数据包会经过不同的路由，并在不同的时间到达接收端，而UDP协议并不知道如何组装这些数据包，从而把这些数据包还原成完整的文件。

基于这两个问题，我们引入了TCP。**TCP（Transmission Control Protocol,传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议**。相对于UDP，TCP有下面两个特点：

*  对于数据包丢失的情况，TCP提供重传机制
 *  TCP引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件

和UDP头一样，TCP头除了包含目标端口和本机端口号外，还提供了用于排序的序列号，以便接收端通过序号来重排数据包。

下面看看TCP下的单个数据包的传输过程：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70 2]  
通过上图你应该可以了解一个数据包是如何通过TCP来传输的。TCP单个数据包的传输过程和UDP流程差不多，不同的地方在于，通过TCP头的信息保证了一块大的数据传输的完整性。

## TCP连接的生命周期 ##

一次完整的TCP连接的生命周期包括了"**建立连接**"、"**传输数据**"和"**断开连接**"三个阶段。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70 3]

*  **首先，建立连接阶段**。这个阶段是通过"三次握手"来建立客户端和服务器之间的连接。TCP提供面向连接的通信传输。**面向连接**是指在数据通信开始之前先做好两端之间的准备工作。所谓**三次握手**，是指在建立一个TCP连接时，客户端和服务器通过要发送三个数据包以确认连接的建立。
 *  **其次，传输数据阶段**。在该阶段，**接收端需要对每个数据包进行确认**，也就是接收端在接收到数据包之后，需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端的重发机制。同样，一个大的文件在传输过程中会被拆分为很多小的数据包，这些数据包在到达接收端之后，接收端会按照TCP头中的序号为其重新排序，从而保证完整的数据。
 *  **最后，断开连接阶段**。数据传输完毕之后，就要终止连接了。涉及到最后一个阶段"四次挥手"来保证双方都能断开连接。

**以上就是TCP协议在网络数据包中的具体作用。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302195300419.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200302200159360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200302201459376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200302201756350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3MTExNw==,size_16,color_FFFFFF,t_70