一文串联 HTTP、TCP、IP、以太网
// 每日前端夜话 第460篇 // 正文共:4600 字 // 预计阅读时间:10 分钟 最近部门组织了一次前端性能优化交流会,大家从输入页面 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 次挥手断开连接。 真实的过程更加复杂,我们主要分析以下几点: 建立连接阶段 通过 Mac 寻址找到服务器硬件接口(数据链路层) 通过网线向服务器硬件接口传输比特信息(物理层) DNS 域名解析(应用层) 建立 TCP 连接(传输层) 通过 IP 寻址找到目标服务器(网络层) 发送数据阶段 发送