一文串联 HTTP、TCP、IP、以太网

最新推荐文章于 2023-04-28 01:17:32 发布

孟思行

最新推荐文章于 2023-04-28 01:17:32 发布

阅读量1k

点赞数 2

分类专栏：复习大纲文章标签：网络协议前端大前端 http tcpip

本文链接：https://blog.csdn.net/u011192674/article/details/111859067

版权

本文详细阐述了从输入页面URL到页面内容加载过程中涉及的网络协议，包括DNS域名解析、TCP连接建立、IP寻址、MAC寻址及数据传输。通过对HTTP请求的抓包分析，解释了TCP的三次握手、DNS解析流程、IP寻址算法以及以太网中MAC地址的作用。最后，还介绍了SSL安全层的建立和HTTP请求的发送过程。

摘要由CSDN通过智能技术生成

最近部门组织了一次前端性能优化交流会，大家从输入页面 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 次挥手断开连接。

真实的过程更加复杂，我们主要分析以下几点：

建立连接阶段
- DNS 域名解析（应用层）
- 建立 TCP 连接（传输层）
  - 通过 IP 寻址找到目标服务器（网络层）
  - 通过 Mac 寻址找到服务器硬件接口（数据链路层）
  - 通过网线向服务器硬件接口传输比特信息（物理层）
发送数据阶段
- 建立 SSL 安全连接（传输层）
- 发送 HTTP 请求（应用层）