02-TCP协议:如何保证页面文件能被完整送达浏览器?

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

要想优化Web页面的加载速度,你需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识,不管你是使用HTTP,还是使用WebSocket,它们都是基于TCP/IP的,如果你对这些原理有足够了解,也就清楚如何去优化Web性能,或者能更轻松地定位Web问题了。此外,TCP/IP的设计思想还有助于拓宽你的知识边界,从而在整体上提升你对项目的理解和解决问题的能力。

因此,在这篇文章中,我会给你重点介绍在Web世界中的TCP/IP是如何工作的。当然,协议并不是本专栏的重点,这篇文章我会从我的角度结合HTTP来分析网络请求的核心路径,如果你想对网络协议有更深入的理解,那我推荐你学习刘超老师的《趣谈网络协议》专栏,以及陶辉老师的《Web协议详解与抓包实战》视频课程。

好,接下来我们回到正题,开始今天的内容。在网络中,一个文件通常会被拆分为很多数据包来进行传输,而数据包在传输过程中又有很大概率丢失或者出错。那么如何保证页面文件能被完整地送达浏览器呢?

这篇文章将站在数据包的视角,给出问题答案。

一个数据包的“旅程”

下面我将分别从“数据包如何送达主机”“主机如何将数据包转交给应用”和“数据是如何被完整地送达应用程序”这三个角度来为你讲述数据的传输过程。

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

互联网中的数据是通过数据包来传输的。如果发送的数据很大,那么该数据就会被拆分为很多小数据包来传输。比如你现在听的音频数据,是拆分成一个个小的数据包来传输的,并不是一个大的文件一次传输过来的。

1. IP:把数据包送达目的主机

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

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

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

为了方便理解,我先把网络简单分为三层结构,如下图:

简化的IP网络三层传输模型

下面我们一起来看下一个数据包从主机A到主机B的旅程:

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

IP是非常底层的协议,只负责把数据包传送到对方电脑,但是对方电脑并不知道把数据包交给哪个程序,是交给浏览器还是交给王者荣耀?因此,需要基于IP之上开发能和应用打交道的协议,最常见的是“用户数据包协议(User Datagram Protocol)”,简称UDP

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

为了支持UDP协议,我把前面的三层结构扩充为四层结构,在网络层和上层之间增加了传输层,如下图所示:

简化的UDP网络四层传输模型

下面我们一起来看下一个数据包从主机A旅行到主机B的路线:

在使用UDP发送数据时,有各种因素会导致数据包出错,虽然UDP可以校验数据是否正确,但是对于错误的数据包,UDP并不提供重发机制,只是丢弃当前的包,而且UDP在发送之后也无法知道是否能达到目的地。

虽说UDP不能保证数据可靠性,但是传输速度却非常快,所以UDP会应用在一些关注速度、但不那么严格要求数据完整性的领域,如在线视频、互动游戏等。

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

对于浏览器请求,或者邮件这类要求数据传输可靠性(reliability)的应用,如果使用UDP来传输会存在两个问题

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

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

下面看看TCP下的单个数据包的传输流程:

简化的TCP网络四层传输模型

通过上图你应该可以了解一个数据包是如何通过TCP来传输的。TCP单个数据包的传输流程和UDP流程差不多,不同的地方在于,通过TCP头的信息保证了一块大的数据传输的完整性。

下面我们再看下完整的TCP连接过程,通过这个过程你可以明白TCP是如何保证重传机制和数据包的排序功能的。

从下图可以看出,一个完整的TCP连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。

一个TCP连接的生命周期

到这里你应该就明白了,TCP为了保证数据传输的可靠性,牺牲了数据包的传输速度,因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。

总结

好了,这一节就到这里,下面我来做一个简单的总结。

其实了解TCP协议,是为了全方位了解HTTP,包括其实际功能和局限性,之后才会更加深刻地理解为什么要推出HTTP/2,以及为什么要推出QUIC协议,也就是未来的HTTP/3。这是一个由浅入深、循序渐进的过程,我希望你能稳扎稳打,学好这每一步、每一个协议,后面“水到自然渠成”。

思考时间

今天这篇文章我没有讲HTTP协议,但是相信你应该听说过,HTTP协议是基于TCP协议的,那么今天我留给你的问题是:你怎么理解HTTP和TCP的关系?

欢迎在留言区与我分享你的想法,也欢迎你在留言区记录你的思考过程。感谢阅读,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友。