起因

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

前后端联调时的 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 安装笔记一文，在安装了抓包工具后需要在电脑和手机上安装证书。

curl 和 Wireshark

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