本文转载自微信公众号「前端日志」,作者孟思行 。转载本文请联系前端日志公众号。
最近部门组织了一次前端性能优化交流会,大家从输入页面 URL 到最终页面展示内容这个过程提出了许多优化点。但同时发现很多同学对 HTTP 协议层的知识不能串联起来,于是整理了这篇文章,希望可以给大家带来一丝灵感。
当我们在页面上发起一个 AJAX 请求的时候,在网络协议层面都经历了哪些内容?
- // 发起请求
- fetch('https://baidu.com')
- // 协议层1...
- // 协议层2...
- // 协议层3...
- .then(res=>
- // 得到结果
- console.log(res)
- })
如上述代码所示,我们对 baidu.com 发起了一个网络请求,最终在 then 方法中得到了具体的响应内容。
使用 Wireshark 抓包结果如下:
图中可以看到,请求 baidu.com 时,首先通过 TCP 3 次握手建立连接,然后通过 HTTP 传输内容,最后通过 TCP 4 次挥手断开连接。
真实的过程更加复杂,我们主要分析以下几点:
建立连接阶段
要获取 baidu.com 的网页内容,就需要和 baidu 服务器建立连接,怎样建立这个连接呢?
DNS 域名解析
通过 DNS 解析,我们就能找到 baidu 服务器对应的 IP 地址。
如图:
经过 DNS 解析后,我们就能得到 baidu.com 的 IP 地址了:39.156.69.79 和 220.181.38.148,通常客户端会随机选中一个 IP 地址进行通信。
域名的解析步骤
其实 IP 不一定要通过 DNS 解析才能获取,它通常会被客户端缓存,只有在 DNS 缓存都没有命中的时候才会请求 DNS 服务器。
判断步骤如下:
建立 TCP 连接
有了 IP 地址之后,客户端和服务器端就能建立连接了,首先是建立 TCP 连接。
TCP 是一种面向连接的、可靠的、基于字节流的传输层通信协议。
在这一层,我们传输的数据会按照一个个的字节装入报文中,当报文的长度达到最大分段(MSS)时,就会发送这个报文。如果传输的报文很长,可能会被拆分成多个 TCP 报文进行传输。
TCP 报文头如下:
我们主要看以下几点:
接下来,我们看一下 TCP 是怎样建立连接的?
如图所示,建立 TCP 连接需要 3 个步骤,俗称三次握手。
经过了 3 次握手,即保证了客户端和服务器端都能正常发送和接收数据,TCP 连接也就建立成功了。
TCP 可靠传输原理
上文中说到,TCP 是可靠的传输,这是为什么呢?
这是因为 TCP 内部使用了 停止等待协议 ARQ ,它通过 确认 和 重传 机制,实现了信息的可靠传输。
例如:
在这期间,如果某一条数据很久都没有得到确认,客户端就会重传这条数据。这样一来,对于与每一次发送的数据,服务器端都得到了确认,即保证了数据的可靠性。
虽然 ARQ 可以满足数据可靠性,但每次只能发送和确认一个请求,效率太低了,于是就产生了连续 ARQ 协议。
连续 ARQ 协议 会连续发送一组数据,然后再批量等待这一组数据的确认信息,好比把单线程 ARQ 变成了多线程,大大提高了资源的利用效率。
如:
在这个流程中,服务器端不需要对每一个数据都返回确认信息,而是接收到多个数据时一并确认,这个方式叫做 累计确认。
这里有个疑问,TCP 的每一次握手,是怎么找到目的服务器呢?
答:通过 IP 协议。
根据 IP 协议找到目标服务器
IP 协议的目的是实现网络层的数据转发,它通过路由器不断跳转,最终把数据成功送达目的地。
上文中的每一次 TCP 握手以及数据交互,都是通过 IP 协议去传输的。
IP 报文头如下:
我们关注以下两点就可以了:
发起一个 IP 请求执行流程如下:
路由表存在于计算机或路由器中,由目的 IP 地址、子网掩码、下一跳地址、发送接口四部分组成。通过目的 IP 地址,即可找到下一跳的地址,进行转发。
例如:A 要向 G 发送 IP 数据。
具体流程如下:
A 查询路由表,发现下一跳为 B,于是把数据传给 B。
B 查询路由表,发现下一跳为 E,于是把数据传给 E。
E 查询路由表,发现下一跳为 G,于是把数据传给 G。
你是否有疑惑,为什么 IP 会按照这条路径向 G 传输数据呢?
其实,上图中的路径并非只有一条,我们通过 ABEG 到达了目的地 G,同样也可以通过 ABCFHG 到达 G,这两种路径都能完成任务,为什么 IP 不选择 ABCFHG 这条路径呢?
这就涉及到了 IP 寻址的算法。
IP 寻址算法
我们可以把网络中的所有计算机都看做是一个点,计算机之间的连接看做是一条线,这些点和线就组合成了一个图。
例如:
通过上图,我们就把复杂的网络转化成了数学问题。IP 寻址算法,其实就是图论中的最短路径的算法。
最短路径算法在 IP 协议中有 2 种实现:
通过以上两个协议,我们就能找到通往目的地的路径了。
这里抛出一个问题:IP 数据是怎样从一个路由器跳到另一个路由器呢?
答:通过以太网协议。
通过 Mac 寻址找到服务器硬件接口
IP 协议主要是用来寻找最优路径的,具体的传输是由以太网协议来做的。
以太网属于数据链路层,它主要负责相邻设备的通信。原理是通过查询交换机 Mac 表,找到通信双方的物理接口,进而开始通信。
以太网报文头如下:
我们只用关心以下 3 个点:
可以看到,以太网层都是通过 Mac 地址进行通信的,这里的 Mac 地址是哪里来的呢?
答:通过 ARP 协议。
ARP 协议 是一个通过解析 IP 地址来找寻 Mac 地址的协议。IP 地址转换成 Mac 地址后,就能进行以太网数据传输了。
例如:
当机器 A 向机器 C 发送数据时:
经过上述的流程,我们就找到了目的机器的硬件接口。
通过以太网协议,我们找到了目标机器的硬件接口,接下来要怎么发送信息呢?
答:通过物理层。
通过网线向服务器硬件接口传输比特信息
在没有 WiFi 的年代,我们只能通过插网线来进行上网,网线其实就是物理层的设备之一。
网线可以由多种材料组成,最常见的就是光纤和电缆。
光纤和电缆的传输原理类似,都是通过两个信号来模拟二进制数据的,一个信号即为一个比特。
如:在光纤中,我们通过观察光的闪动,即可得知传输的二进制数据。
有了这些物理设备,我们就能把复杂的数据转换成光信号或者电信号进行传输了。
发送数据阶段
发送数据可以分为两个步骤:
建立安全层 SSL
本文的案例是发送一个 HTTPS 的请求,所以在发送数据之前,会创建一个 SSL 安全层,用于数据加密。
通常的加密方法有两种:
互联网通信是双向的,所以我们需要使用对称加密,可是,怎样才能保证通信双方都有一把相同的钥匙呢?
目前的解决方案:
秘钥协商过程如图:
图中划重点:
Ok,秘钥协商之后,我们的 SSL 安全层也就建好了。
秘钥协商时存在一个问题:
秘钥协商时,怎么保证是和真正的服务器在协商,而不是一个中间人呢?
答:数字证书。
数字证书重点关注 2 个部分:
其中,数字签名又是由服务器公钥和证书私钥加密生成的,目的是为了防止服务器公钥被篡改。
有了数字证书,客户端就能通过验证证书,来判断服务器是否是真正的服务器了。
验证逻辑如下:
可以看到,数字证书通过同样的算法进行解密,如果得到相同的信息摘要,就能保证数据是有效的,如果不一致,则会验证失败,拒绝后续的请求。
到这里为止,所有的准备工作都就绪了,接下来才是发送 HTTP 请求。
发送 HTTP 请求
HTTP 协议其实就是制定了一个通信规则,规定了客户端和服务器之间的通信格式。
以请求 baidu 首页为例:
如上图所示,发起 HTTP 请求时,必须遵守以下规则:
服务器响应请求时,同样遵守了 HTTP 响应规则:
只要我们遵守这个规则,就能进行 HTTP 通信了。
到目前为止,我们已经分析完成了数据请求的所有过程,你是否都理解了呢?
思考与总结
本文通过一个网络请求,对整个 HTTP、TCP、IP、以太网等协议进行了流程化分析,最后再梳理一下:
Flash曾经是一代人的记忆,但也让不少人深恶痛绝, 好在它已经在2020年12月31日...
从乘车算法到使用人工智能机器人的客户服务,人工智能正在被用来改善现代的各种...
一项技术若有真正用武之地,必须与商业结合,在提升生产效率和解决生活问题上发...
今天我给大家分享20款小众宝藏APP,工作、生活全不误,每天5分钟让自己悄悄成长...
根据ResearchAndMarkets的数据,全球5G核心市场规模预计将从2020年的6.3亿美元增...
2008 年,苹果宣布推出 App Store 应用商店时,当时店内的应用只有数百款,十几...
7月27日消息,近日,微信支付页中的腾讯服务在北京、广州地区上线新入口出行服务...
随着社会的发展,我国工厂逐渐由原来的人工为主到现在的设备为主,充分体现了人...
2021年,工业互联网作为数字经济的重要组成部分再度成为政策的焦点。工信部信息...
虽然说现在的iPhone没有已经那么火爆了,首卖的时候Apple Store也没有排长龙的现...