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

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

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

在网络中,一个文件通常会被拆分为很多数据包来进行传输,而数据包在传输过程中又有很大概率丢失或者出错。那么如何保证页面文件能被完整地送达浏览器呢?

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

一个数据包的"旅程"

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

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

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

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

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

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

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

为了方便理解,我先把网络简单分为三层结构,如下图: 一个数据包从主机 A 到主机 B 的旅程:

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

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

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

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

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

一个数据包从主机 A 旅行到主机 B 的路线:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

做一个简单的总结。

  • 互联网中的数据是通过数据包来传输的,数据包在传输过程中容易丢失或出错。
  • IP 负责把数据包送达目的主机。
  • UDP 负责把数据包送达具体应用。
  • 而 TCP 保证了数据完整地传输,它的连接可分为三个阶段:建立连接、传输数据和断开连接。

其实了解 TCP 协议,是为了全方位了解 HTTP,包括其实际功能和局限性,之后才会更加深刻地理解为什么要推出 HTTP/2,以及为什么要推出 QUIC 协议,也就是未来的 HTTP/3。这是一个由浅入深、循序渐进的过程。

思考:

怎么理解 HTTP 和 TCP 的关系?

相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐7 小时前
前端图像处理(一)
前端