参考：
https://www.practicalnetworking.net/series/packet-traveling/packet-traveling/ 耗子叔推荐，搭配下面油管视频
Packet Traveling - How Packets Move Through a Network(油管视频）

网路基础——从一条电线到TCP/IP （B站系列视频）
TCP协议：如何保证页面文件能被完整送达浏览器？ （极客时间课程）
浏览器端发起 HTTP 请求流程 <—> 对应面试常客 <—>浏览器输入url开始，都发生了那些过程？
HTTP/1：HTTP性能优化
https://github.com/qufei1993/http-protocol

OSI七层模型和TCP四层模型，一般情况下，TCP/IP四层协议更具实际意义。
image.png
互联网中的数据是通过数据包来传输的。如果发送的数据很大，那么该数据就会被拆分为很多小数据包来传输。比如你现在听的音频数据，是拆分成一个个小的数据包来传输的，并不是一个大的文件一次传输过来的。
image.png

1 链路层（Ethernet/PPP)

以太网（一般网络） / ppp网（骨干网），数据包（帧包）有大小要求，需要分包

2 IP—把数据包送达目的主机

在帧包基础上封装IP数据包（目标ip/源IP），只能送到对应ip的计算机，但是不知道给那个应用程序，如微信还是qq或浏览器
image.png

3 UDP—把数据包送达应用程序

用户数据包协议（User Datagram Protocol）
在IP包基础上封装,目标port和源prot，该协议无重发/检查/排序功能，仅仅发包，效率高，可能丢失，一般用在直播
IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序
image.png

4 TCP—把数据完整地送达应用程序

同UDP，但是有严格的传输机制，一个简单对话至少发送9个包（三次握手 + 对话（发送+确认）两次 + 四次挥手），UDP只需要一个包，效率低，但是传输可靠
image.png
image.png
image.png
image.png

4.1 报文

image.png
位码即tcp标志位，有6种标示：
SYN(synchronous 同步 建立联机)
ACK(acknowledgement 确认)
PSH(push传送)
FIN(finish结束)
RST(reset重置)
URG(urgent紧急)
image.png
两种序列号：
Sequence number(顺序号码)
Acknowledge number(确认号码)

4.2 三次🤝

image.png
第一次握手：主机A发送位码为syn＝1，随机产生seq number=1234567的数据包到服务器，主机B由SYN=1知道，A要求建立联机；

第二次握手：主机B收到请求后要确认联机信息，向A发送ack number=(主机A的seq+1)，syn=1，ack=1，随机产生seq=7654321的包；

第三次握手：主机A收到后检查ack number是否正确，即第一次发送的seq number+1，以及位码ack是否为1，若正确，主机A会再发送ack number=(主机B的seq+1)，ack=1，主机B收到后确认seq值与ack=1则连接建立成功。

示例：
第一次握手（cli—->server)，标志位SYN置1，发送seq序列号
image.png
第二次握手（server—>cli)，标志位SYN和ACK置1 ， Ack number为第一次握手传过来的序列化（seq）3556820047+1， 同时传递自己的seq
image.png
第三次握手（cli—->server)，标志位ACK置1，ACK为第二次握手传过来的序列化（seq）4269862749+1
image.png

4.3 三次握手状态变浅

握手期间共有5种状态：
CLOSED：初始状态
LISTEN: 监听端口
SYN_SENT: 已发送发送SYN
SYN_RCVD: 接受到SYN
ESTABLISHED：建立连接

image.png
从最开始双方都处于CLOSED状态。然后服务端开始监听某个端口，进入了LISTEN状态。
然后客户端主动发起连接，发送 SYN , 自己变成了SYN-SENT状态。
服务端接收到，返回SYN和ACK(对应客户端发来的SYN)，自己变成了SYN-REVD。
之后客户端再发送ACK给服务端，自己变成了ESTABLISHED状态；服务端收到ACK之后，也变成了ESTABLISHED状态。

可以借助 Netstat命令查看网络先关状态

4.4 实际案列—node建立tcp链接

网络模块

5 HTTP

5.1 HTTP/0.9

默认只传输html文件，文件也很小
image.png

5.2 HTTP/1.0

多类型文件（html、图片、音视频等） + 压缩方式 + 编码类型 + 语言 + 等等需求，引入了请求头和响应头，它们都是以为 Key-Value 形式保存，用于客户端和服务端协商，同理 ( 状态码 + Cache 机制 + 用户代理 )
image.png
比如

  1. accept: text/html
  2. accept-encoding: gzip, deflate, br
  3. accept-Charset: ISO-8859-1,utf-8
  4. accept-language: zh-CN,zh

5.3 HTTP/1.1

支持持久链接，在一个 TCP 连接上可以传输多个 HTTP 请求
image.pngimage.png

5.4 HTTP/2.0

HTTP2

6 DNS

递归查询
image.png

6.0 缓存

客户端查询DNS的过程是：

本地host文件—本地缓存—-DNS服务器

参考：
dns存在浏览器dns缓存 和 操作系统缓存
本地开发切换host清楚缓存方法，切断keep-alive造成的长连接
chrome and devtool
DNS 域名解析过程？
DNS 域名解析过程？

6.1 报文

DNS协议是基于UDP协议的
image.png
示例：
curl www.yuque.com
image.png