前端网络frontend

1、网络七层模型

——搞懂 OSI 七层模型，彻底明白数据是怎么“飞”到浏览器里的！

---

一、OSI 七层模型是什么？

OSI（Open System Interconnection）模型是国际标准化组织（ISO）提出的一个网络通信分层结构。
简单说，它就像是“网络世界的流水线”，把复杂的通信任务分成七个层次，每层都只负责自己的那一部分工作。

当你在浏览器输入一个网址，按下回车的那一刻，数据其实就开始从第7层一路往下走，到第1层通过物理信号发送；
服务器收到后，再从第1层一路往上走，到第7层被你的网页程序接收、显示。

---

🧭 七层结构一览表

层级	名称	主要功能	前端相关举例
7	应用层	向用户提供网络服务	HTTP、DNS、WebSocket、SMTP
6	表示层	数据的编码、加密、压缩	HTTPS加密、图片编码、视频压缩
5	会话层	建立、管理、终止会话连接	SSH登录、WebSocket握手
4	传输层	定义端口、控制流量、错误校验	TCP（可靠）、UDP（实时）
3	网络层	负责寻址和路由选择	IP协议、路由器
2	数据链路层	MAC寻址、组帧与差错检测	网卡、交换机
1	物理层	传输比特流的电信号	网线、光纤、Wi-Fi信号

---

🌍 第七层：应用层（Application Layer）

你每天打交道最多的一层！
这一层直接面对“用户”，提供各种网络服务。

前端开发中常见的协议：

• HTTP / HTTPS：网页请求与响应的核心协议。

  比如 AJAX 请求、fetch('/api/user') 等。

• DNS：域名解析系统，把 www.baidu.com 转成 IP 地址。

• WebSocket：浏览器与服务器之间的长连接通信，用于聊天、实时数据。

• SMTP / POP3：邮件传输协议（如登录邮箱时）。

• SSH：安全登录服务器的协议（开发部署常用）。

---

🔒 第六层：表示层（Presentation Layer）

可以理解为 网络世界的“翻译官” 。
它确保双方都“听得懂”彼此的数据格式。

主要功能：

1. 数据加密 / 解密

   • 例如 HTTPS 中的 SSL/TLS 加密过程就在这一层进行。

2. 数据压缩 / 解压缩

   • 传输前压缩，接收后解压，让网页加载更快。

3. 格式转换

   • 比如图片（JPEG、PNG）、文本（ASCII、UTF-8）等在传输前后的格式解码。

🧠 前端提示：
当你用浏览器加载一张 JPEG 图片时，浏览器会在这一层将文件编码转成图像显示。

---

🔗 第五层：会话层（Session Layer）

会话层负责建立、维持和终止会话，有点像打电话：

拨号 → 通话 → 挂断。

主要职责：

• 创建通信会话；
• 维护通信状态（即连接是否还在）；
• 支持断点续传（如下载中断后继续）。

🔍 举例：

• WebSocket 的握手过程属于会话层；
• SSH远程连接 的保持和断开，也由这层管理。

---

🚚 第四层：传输层（Transport Layer）

负责把数据“安全、完整”地送到对方程序。
最常见的两个协议是：

协议	特点	应用场景
TCP	面向连接、可靠、有序传输（通过“三次握手”、“四次挥手”）	HTTP、HTTPS、FTP
UDP	无连接、不可靠、速度快	视频通话、直播、在线游戏

🧠 前端提示：

• 浏览器访问网页时使用 TCP；
• 直播、语音、WebRTC 视频聊天则更偏向 UDP。

---

🛰️ 第三层：网络层（Network Layer）

重点是寻址（IP）和路由选择。
简单理解就是：

“要去哪里？怎么走？”

主要工作：

1. 给设备分配 IP 地址；
2. 选择最优路径 把数据送到目标设备；
3. 路由转发 —— 路由器就是这层的代表。

🔍 IPv4 与 IPv6：

• IPv4：192.168.1.1
• IPv6：2001:0db8::1

IPv4 地址不够用了，现在逐步推广 IPv6。

🧠 前端提示：
每次你发请求到服务器，DNS 会先帮你查到 IP 地址，
网络层再根据 IP 找到对应的服务器位置。

---

⚙️ 第二层：数据链路层（Data Link Layer）

这一层在局域网（LAN）内部通信中起作用。

主要功能：

• 定义 MAC 地址（每张网卡都有唯一标识）；
• 将数据打包成“帧”；
• 检测错误（但不纠正）；
• 使用交换机广播或转发。

🔍 举例：
你家 Wi-Fi 下的设备之间通信，靠的就是 MAC 地址。
数据链路层负责判断“谁发”、“谁收”。

---

⚡ 第一层：物理层（Physical Layer）

直接与物理介质打交道，传输的是最底层的电信号（0 和 1）。

常见设备与介质：

• 网线 / 光纤 / 无线信号
• 中继器、集线器、网卡
• 电信号、电压、光信号

📡 传输信道类型：

• 有线信道：双绞线、电缆、同轴线、光纤；
• 无线信道：卫星、无线电波、Wi-Fi。

🧠 前端提示：
物理层负责让“数据真的能传出去”，
它不关心是什么内容，只负责把 010101 传过去。

---

✈️ 整个传输流程举例

当你访问一个网站：

1️⃣ 你输入网址 → 应用层发起 HTTP 请求
2️⃣ 表示层 → 对数据加密（HTTPS）
3️⃣ 会话层 → 建立与服务器的通信会话
4️⃣ 传输层 → 使用 TCP 确保可靠传输
5️⃣ 网络层 → 根据 IP 找到服务器
6️⃣ 数据链路层 → 通过 MAC 地址转发帧
7️⃣ 物理层 → 把数据转换成电信号发送出去

服务器收到后，反方向逐层“解包”，最终在你的浏览器中显示网页。

---

💡 总结：如何记住七层？

口诀：

物数网传会表应
（物理、数据链路、网络、传输、会话、表示、应用）

或者更形象一点👇

“物流铺路，数据装车，网络导航，传送交货，会议沟通，表达翻译，应用展示。”

---

✅ 作为前端开发者你该掌握的重点

层级	学习重点	对前端的意义
应用层	HTTP / HTTPS / WebSocket / DNS	直接影响网页加载与通信
表示层	加密、编码、压缩	HTTPS、文件传输安全
传输层	TCP / UDP	了解网络延迟、WebSocket原理
网络层	IP、路由	网络请求定位与跨域理解
数据链路 & 物理层	MAC、信号	了解底层通信原理即可

---

📘 结语

理解 OSI 七层模型，就像理解网页请求的“生命旅程”。
从浏览器发出请求，到服务器返回响应，每一步都在这七层中协作完成。 掌握它，你不只是“能写前端”，
而是能真正理解互联网在你代码背后是怎么运作的。🌐

三次挥手，四次挥手

浏览器输入url发生了什么