衡量Web页面性能有一个重要的指标叫“FP (First Paint)”, 是指从页面加载到首次开始绘制的时长， 这个指标直接影响用户的跳出率，更快的页面响应意味着更多的PV，更高的参与度，以及更高的转化率。而影响FP指标的一个重要因素就是 网络加载速度。
要想优化 Web 页面的加载速度， 需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识，不管是使用HTTP， 还是使用WebSocket（HTTP的改造版本， 增加了服务器向客户端主动发送消息的能力），它们都是基于TCP/IP的，了解这些原理，了解在Web世界中的TCP/IP是如何工作的。 也就比较清楚如何优化Web性能，或者更轻动地定位 Web 问题。
一个数据包的“旅程”
互联网，实际上是一套理念和协议组成的体系架构。其中， 协议是一套众所周知的规则和标准，如果各方都同意使用，那么它们之间的通信将变得毫无障碍。
互联网中的数据是通过数据包来传输的， 如果发送的数据很大，那么该数据就会被拆分为很多小数据包来传输。而数据包在传输过程中又有很大概率丢失或者出错，那么如何保证页面文件能够完整地送达浏览器呢？
1. IP：把数据包送达目的主机
数据包要在互联网上进行传输， 就需要符合 网际协议（Internet Protocol,简称IP）标准。互联网上不同的在线设备都有唯一的地址， 地址只是一个数字，这和大部分家庭收件地址类似，你只需要知道一个家庭的具体地址，就可以往这个地址发送包裹，这样物流系统就能把物品送到目的地。
计算机的地址就称为IP地址， 访问任何网站实际上只是你的计算机向另外一台计算机请求信息。
要把一个数据包从主机A发送给主机B，那么在传输之前，数据包上会被附加主机B的 IP 地址信息，这样在传输过程中才能正确寻址。额外地，数据包上还会附加上主机A本身的 IP 地址，有了这些信息主机B 才可以回复消息给主机A 。这些附加的信息会被装进一个叫 IP 头的数据结构中。 IP 头是 IP 数据包开头的信息， 包含IP 版本、源IP地址、目标IP地址、生存时间等信息。
为了方便理解，先把网络简单分为三层结构：
数据包从主机A 到 主机B的旅程如下：
- 上层将含有“极客时间”的数据包交给网络层；
- 网络层再将IP头附加到数据包上， 组成新的IP数据包， 并交给底层；
- 底层通过物理网络将数据包传输给主机B；
- 数据包被传输到主机B的网络层， 在这里主机B拆开数据包的IP头信息，并将拆开的数据部分交给上层；
- 最终，含有“极客时间”信息的数据包就到达了主机B的上层。
- 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一般会应用到一些关注速度，不那么严格要求数据完整性的领域，如在线视频，互动游戏等。
- TCP：把数据完整地送达应用程序
对于浏览器请求，或者邮件这类要求数据传输可靠性的应用，如果使用UDP来传输数据会存在两个问题：
- 数据包在传输过程中容易丢失；
- 大文件会被拆分成很多小的数据包来传输，这些小的数据包会经过不同的路由，并在不同的时间到达接收端，而UDP协议并不知道如何组装这些数据包，从而把这些数据包还原成完整的文件，最终数据包可能是一个乱序的数据。
以上两个问题，可以通过TCP（Transmission Control Protocol， 传输控制协议）来解决， TCP 是一种面向连接的， 可靠的， 基于字节流的传输层通信协议。相较于UDP， TCP有以下特点：
- 对于数据包丢失的情况， TCP提供重传机制；
- TCP引入了数据包排序机制， 用来保证把乱序的数据包组合成一个完整的文件。
和UDP头一样， TCP头除了包含了目标端口和源端口号外，还提供了用于排序的序列号， 以便接收端通过序号来重排数据包。
TCP单个数据包的传输流程和UDP差不多， 不同的地方在于， 通过TCP头的信息保证了一块大的数据传输的完整性。
再看下TCP的连接过程，这是TCP可靠性的关键。
一个完整的TCP连接的生命周期包含了 “建立连接” “传输数据” 和 “断开连接” 三个阶段。
- 建立连接阶段： 这个阶段是通过“三次握手”来建立客户端和服务端之间的连接。TCP提供面向连接的通信传输。 面向连接是指在数据通信开始之前先做好两端的准备工作。所谓三位握手，是指建立一个TCP连接时，客户端和服务端总共要发送三个数据包以确认连接。
- 传输数据阶段：在该阶段，接受端需要对每个数据包进行确认操作，也就是接受端在接收到数据包之后，需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端重传机制。同样， 一个大的文件在传输过程中会被拆分为很多小的数据包， 这些数据包到达接收端后，接收端会按照TCP头中的序号为其排序，从而保证组成完整的数据。
- 断开连接阶段：数据传输完毕之后， 就要终止连接，通过“四次挥手”来保证双方都能断开连接。
所以， TCP为了保证数据输出的可靠性， 牺牲了数据包的传输速度。
延伸：
- 浏览器可以同时打开多个页面， 它们端口是否一样？如果一样，数据包如何返给指定页面？
1️⃣ 端口一样(都是Network进程)
2️⃣ Network 进程知道每个TCP连接所对应的页面是哪个,所以接收到数据包后，会把数据分发给对应的渲染进程。
- TCP传送数据时，浏览器端就做渲染处理了吗？ 如果前面的数据包丢失了， 后面数据包先来会等吗？如果是这样那么实时渲染怎么处理？
接收到HTTP 响应头中的content-type类型时就开始准备渲染进程了，响应体数据一旦接收到便开始做DOM解析了！基于HTTP不用担心数据包丢失的问题（因为丢包和重传都是在TCP层解决的）HTTP能保证数据按照顺序接收（也就是说， 从TCP到HTTP的数据就已经是完整的了，即便是实时渲染，如果发生丢包也得在重传后才能开始渲染）。
3.HTTP和TCP的关系？
HTTP 和 TCP 都是 TCP/IP协议簇的子集。 HTTP协议属于应用层，TCP协议属于传输层，HTTP协议位于TCP协议的上层。
请求方要发送的数据包，在应用层加上HTTP头以后会交给传输层的TCP协议处理，应答方接收到的数据包，在传输层拆掉TCP头以后交给应用层的HTTP协议处理。建立 TCP 连接后会顺序收发数据，请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。
