OSI的7层网络模型，大家都很熟悉（物理层、数据链路层、网络层、传输层、会话层、表示层和应用层）。但是作为前端开发者，开发一个前端项目的时候，这7层都是如何参与进来的呢？大家可以对照下面的段落理解一下这个过程。
目录
第一层：物理层
第二层：数据链路层
第三层：网络层
第四层：传输层
第五层：会话层
第六层：表示层
第七层：应用层
第一层：物理层 物理实体：网线、光纤、无线电波、电脑及服务器的网卡。
作用：负责所有网络数据的原始比特流（0和1）在物理介质上的传输，它是所有网络通信的物理基础。
对应前端环节：
开发阶段：项目构建后产出的静态文件（如 .html, .js, .css），本质上就是存储在硬盘上的一串二进制比特流。
运行阶段：用户请求网页时，这些静态文件被转换成电信号、光信号或无线电波，通过物理介质从服务器传输到用户的浏览器。
比喻：交通运输的基础设施。如同货物运输所需要的公路、铁轨、航线，它不关心运送的是什么货物，只负责提供承载的基础。
第二层：数据链路层 物理实体：交换机、网卡（MAC地址）。
作用：在同一个局域网内，基于设备的MAC地址进行“点对点”的精准数据帧传输，错误检测，并管理对物理介质的访问。
对应前端环节：在本地网络环境中，确保数据包能准确送达。例如，在公司局域网内，你通过IP地址访问同事电脑上运行的本地开发服务器，数据包就是通过交换机准确转发，而不会发送给其他无关电脑。
比喻：本地邮差系统。交换机就像一个负责一条街道的智能邮差，它知道每个MAC地址（门牌号）对应哪一户，能将信件（数据帧）准确投递到你家，而不会误送到邻居家。
第三层：网络层 物理实体：路由器、三层交换机。
作用：进行逻辑寻址（IP地址）和路由选择，负责将数据包从一个网络跨路径地传输到另一个网络。
对应前端环节：
DNS解析：将你输入的域名（如 www.example.com）解析成服务器的IP地址。
CDN分发：当你请求一个前端资源时，CDN网络中的路由器会智能地将你的请求导向离你地理位置上最近的边缘节点，极大提升资源加载速度。
比喻：全球物流调度系统。路由器就像是物流中转中心，它查看数据包上的IP地址（全球GPS坐标），决定下一站该往哪个城市或国家走，最终将包裹送到目的地所在的城市。
第四层：传输层 物理实体：操作系统内核协议栈、防火墙。
作用：提供端到端的可靠或不可靠通信。主要负责数据分段、端口寻址、流量控制和差错恢复。
对应前端环节：前端项目运行时所依赖的 HTTP/HTTPS 协议正是建立在传输层的 TCP 协议之上的。TCP通过“三次握手”建立可靠连接，确保你请求的HTML、CSS、JS文件能够完整、有序地送达浏览器，如果中途有丢包则会自动重传。
比喻：可靠的快递公司。TCP就像顺丰或联邦快递，它提供可靠的运输服务，确保你的包裹不丢失、不损坏、按顺序送达，并提供物流跟踪（确认机制）。
第五层：会话层 物理实体：浏览器、Web服务器、状态服务器（如Redis）。
作用：负责建立、管理和终止两个应用进程之间的通信会话。
对应前端环节：
浏览器会话管理：使用Cookie、Session或Token来保持用户的登录状态。当你刷新页面或跳转路由时，浏览器会携带Cookie，让服务器知道你还是刚才那个已登录的用户。
WebSocket连接：建立并维持一个全双工的持久化连接，用于实时应用（如聊天室、在线游戏）。
比喻：客服会话与订单号。就像你打电话给客服，客服为你创建了一个专属的订单号（Session ID），在后续的沟通中，你只需提供这个订单号，客服就能立刻调出你的所有信息，无需重复说明身份。
第六层：表示层 物理实体：开发/构建服务器、浏览器、CDN节点。
作用：负责数据的表示、翻译、加密和压缩。
对应前端环节：
开发阶段：使用Babel将ES6+/TypeScript代码转译为兼容性更好的ES5 JavaScript；使用Webpack/Vite等工具对CSS、JS、图片进行压缩和混淆。
运行阶段：浏览器解压服务器发来的Gzip压缩文件；对HTTPS传输的数据进行解密；解析服务器返回的JSON格式数据。
比喻：翻译官与包装工。它将开发者写的“外语”或“方言”（高级代码）翻译成所有浏览器都能听懂的“普通话”（兼容代码），并在发送前压缩打包以节省运费（带宽），同时对敏感信息进行加密处理。
第七层：应用层 物理实体：浏览器、Web服务器、API服务器、开发者的电脑。
作用：为应用程序提供网络服务接口，是用户与网络交互的最终界面。
对应前端环节：这是前端开发者最直接打交道的一层。
开发阶段：你使用JavaScript框架（React/Vue）编写组件和业务逻辑，使用CSS设计样式，使用HTML构建结构。
运行阶段：用户在浏览器中看到并与之交互的界面；浏览器向服务器发起HTTP API请求以获取数据；服务器返回HTML、CSS、JS等资源。
比喻：你与商家的直接对话。你告诉网站“我要购买商品A”（用户交互），网站向你展示一个图文并茂的页面（渲染界面）。你下达指令，它给出结果，整个过程使用的是你们都能理解的“语言”（HTTP协议、浏览器渲染引擎）。 ————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
