以下是我整理的网络协议的知识

起因

虽然从事的是前端开发的工作，但其实在实际工作中还是会经常遇到一些网络请求的问题。比如：

• 前后端联调时的 API 接口调试。
• 前端性能优化时的网络性能优化。
• 浏览器缓存问题的检查。
• 后端通过 cookie、header 传递一些用户信息。

所以，并不是说前端开发不需要知道网络协议。恰恰相反，现在几乎每天的开发工作都会和 chrome 的 Network 面板打交道。如果是手机还要学习网络抓包工具抓取网络请求解决项目问题。

话不多说，下面开始梳理。

梳理下我们常用到的网络协议

我们可以通过常用的浏览器请求页面为例。

IP

IP 地址其实叫做网际协议（Internet Protocol）。所有连接互联网的设备都会有一个 IP 地址，它就类似于设备在网络世界的门牌号。

所以如果两台设备想通过互联网来通信，必须在传输数据之前加上当前设备的 IP 地址和目标设备的 IP 地址。其实就类似于发邮件，邮件中必然会带有发件人和收件人，而如果收到邮件的人想回复，必然是通过邮件中的发件人信息进行回复。

UDP

IP 是个非常底层的协议，它可以实现两台设备间进行数据通信，但是涉及到应用程序间的通信，IP 就不知道该把信息给谁了。所以出现了基于 IP 协议之上开发的能与应用程序通信的协议。 UDP 和 TCP。

UDP，全称用户数据包协议（User Datagrram Prrotocol）。它最重要的信息是端口号，每个想访问网络的程序都需要绑定一个端口号。通过端口号 UDP 就能把指定的数据传递给指定的应用程序。

如果说 IP 协议是通过 IP 地址信息把数据包发送到指定的电脑，而 UDP 协议是通过端口号把数据包分发给正确的程序。当使用 UDP 发送数据时，UDP 只可以校验数据是否正确，但是对于错误异常的数据包，UDP 不提供重发机制，而是直接丢弃错误数据包。

所以 UDP 的特点就是不能保证数据可靠性，但是传输速度非常快。基于这个特点，UDP 适合应用在一些对数据完整性不那么严格的地方，如在线视频、互动游戏等等。

TCP

TCP 全称传输控制协议（Transmission Control Protocol），是一种面向连接的、可靠的、基于字节流的传输层通信协议。

相比于 UDP，TCP 有以下特点

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

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

TCP 传输数据的方式和 UDP 差不多，但是它通过序列号和重发机制保证了数据的完整性。
然后再来看下 TCP 的完整连接过程（众所周知的三次握手和四次挥手就是他啦！）。

• 通过三次握手建立连接
• 传输数据
• 通过四次挥手断开连接

DNS

DNS 全称域名系统（Domain Name System），它用来将域名映射到具体的 IP 地址上。它类似于网络世界里的地址簿，通过公司名称可以找到公司相应物理地址。

DNS 是存在缓存的，无论是计算机本地、运营商服务器等等。

DNS 域名解析是从后往前解析的！比如 www.abcd.test.ke.com 这个域名，查找域名服务器的顺序是 com - ke - test - mint - www 这样。所以可以理解为什么统一网站不同板块的域名变化往往都在前面。

www.baidu.com
tieba.baidu.com
image.baidu.com

HTTP

HTTP 全称超文本传输协议（HyperText Transfer Protocol），它是一种基于 TCP/IP 连接的简单数据通信协议。它通过请求和响应来完成一次通信工作。

如果把网络通信比喻成收发信件：

• IP 协议是发件人和收件人的物理地址，他们是绝对唯一的以保证信件能够准确送达。
• TCP 协议制定了信件的收发方式，比如空运、海运等等。
• HTTP 协议就是信件的内容了，发件人和收件人必须都能理解信件内容才能够顺利通信，所以制定了一些通信规则。如语言、格式、日期等等。

所以，HTTP 协议其实是制定了一套计算机应用间通信的规则。它通过 TCP 三次握手进行通信连接，通过 HTTP 的请求和响应实现通信。

而我们工作中最常遇到的就是它了。

HTTPS

HTTPS 协议就是 HTTP 协议加上 TLS/SSL 加密通道传输。

关于网络安全和通信加密这块儿内容其实很多，像对称加密、非对称加密、加密算法、证书。这块儿后面进行补充~因为当前来说实际应用中不多。

我遇到过的一些 https 的问题：

• 在 https 协议的页面使用 http 协议的请求会出现警报，出于安全考虑不推荐这么用。解决方法网上也有很多。
• 一些 API 如定位、地图这些功能只能在 https 协议的页面上调试。
• 抓包工具可以抓取 http 协议的网络请求内容，但是无法抓取 https 的。需要额外安装证书，如 charles 的安装方法可以看charles 安装笔记一文，在安装了抓包工具后需要在电脑和手机上安装证书。

更多的 HTTP 协议知识点

状态码

• 1xx 信息状态码。一般表示请求还在处理中。如 WebSocket 请求。
• 2xx 成功状态码。常见的如 200 表示请求成功。
• 3xx 重定向状态码。如 301、302、304。
• 4xx 客户端异常。如 400 请求报文异常、403 没有权限、404 NOT FOUND。
• 5xx 服务器异常。最常见的就是 500（遇到这个基本可以找后端同学了）。

请求类型

虽然请求类型挺多，其实主要的就是 get 和 post。

GET 用于向服务器获取数据。
POST 用于将数据从客户端发送给服务器。

Headers

说到 HTTP 协议的 Headers 给我的印象就是特别的多。但是细细看了看，发现 Header 其实就类似于 HTTP 请求时除了请求方法、URI、协议版本、状态码、状态消息外的附加“配置选项”。

或者说有了 Headers 我们能通过 HTTP 协议实现更加复杂的通信。如下：

• 连接方式： Connection
• 请求响应信息：Date、Host、User-Agent
• 数据传输接收规则：Accept、Allow、Content-Type。
• 缓存：Cache-Control、Age、Expires。
• 代理：Via、Proxy-Authenticate。
• 断点续传：Range、Accept-Ranges、If-Range。
• 协议升级：Upgrade

上面简单列出了一些 Header 的用处。总之，简单了解，具体应用的时候再仔细研究应该就可以。对于我而言很少会去实现协议层的东西，能够看懂理解协议内容就好。

curl 和 Wireshark

curl 是一个可以模拟网络请求的工具，用来定义网络请求并调试是很强大的工具（我看运维同学玩的比较多）。
Wireshark 是一个网络包分析工具，相比于 Charles 这种抓取应用层请求查看具体内容的工具，Wireshark 更贱底层，能够抓到像 TCP 握手这些的协议，并且看到字节流。对于深入理解网络协议很好用。

参考资料

• 《图解 HTTP》
• Web协议详解与抓包实战 —— 极客时间

最后

这里只是简单分享了一下我的一些浅薄理解。更多更全的网络协议内容还是多啃啃书~如有任何问题欢迎指正交流。