前端开发之计算机网络模型认识

上一篇👉: 前端开发之HTTP3

文章目录

网络模型

层次 OSI七层模型 TCP/IP五层模型
应用层 提供网络服务给最终用户,如HTTP, FTP, SMTP 应用层(包含OSI的会话层、表示层、应用层)
表示层 数据的加密、解密、压缩、解压缩等 ------
会话层 管理会话建立、维护、终止等 ------
传输层 提供端到端的连接,如TCP, UDP 传输层(功能相同)
网络层 负责路径选择和IP寻址,如IP 网络层(功能相同)
数据链路层 提供介质访问,错误检测,如以太网、PPP 网络接入层(数据链路层+物理层)
物理层 比特流传输,定义电器、机械特性 ------

说明:

  • OSI七层模型是理论模型,详细划分了网络通信的每一个步骤,每一层都有明确的功能和职责。
  • TCP/IP五层模型 是实际应用中更为常见的模型,它简化了OSI模型,将OSI的会话层和表示层的功能合并到了应用层,同时将数据链路层和物理层合并为网络接入层。

1.OSI七层模型详解

1.应用层

  • 作用:直接面向用户,为用户提供应用服务,如Web浏览、电子邮件、文件传输等。具体协议包括HTTP、HTTPS、FTP、SMTP、POP3等。
  • 举例:当你在浏览器输入网址,应用层通过HTTPHTTPS协议与服务器沟通,获取网页内容。

2.表示层

  • 作用:处理数据的表现形式,如数据加密、压缩、解码等,确保数据以适当的形式呈现给应用层。
  • 举例:发送图片前,使用JPEG格式编码(表示层操作),确保接收端能正确解码显示。

3.会话层

  • 作用:管理会话的建立、维护和结束,提供会话的连续性和同步控制。
  • 举例:视频会议应用中,会话层确保视频流的连续播放,不因短暂网络中断而中断会话。

4.传输层

  • 作用:提供端到端的可靠或不可靠数据传输服务。TCP提供可靠、有序的数据流传输,UDP提供无连接、快速传输。
  • 举例:视频直播应用可能使用UDP,因为它对实时性要求高,能容忍少量丢包。

5.应网络层

  • 作用:负责数据包的路由选择和转发,使用IP协议,确保数据跨越网络从源到目的地传输。
  • 举例:当你从中国发送一封电子邮件到美国,网络层决定数据包的最佳传输路径。

6.数据链路层

  • 作用:在相邻网络节点间传输数据帧,提供错误检测和纠正功能,使用MAC地址标识网络设备。
  • 举例:以太网卡通过MAC地址识别数据帧的接收者,并进行错误校验。

7.物理层

  • 作用:定义了网络设备间物理连接的规格,包括电压、线缆类型、接口标准等。
  • 举例:双绞线、光纤、无线电波等,都是物理层的传输介质。

2.TCP/IP五层协议模型

  • 应用层:与OSI的应用层、表示层、会话层相对应,提供所有高层协议服务。
  • 传输层:与OSI传输层相同,负责端到端通信。
  • 网络层:与OSI网络层相同,主要协议为IP。
  • 数据链路层:与OSI数据链路层相同,但在实际应用中可能进一步细分为逻辑链路控制子层(LLC)和媒体访问控制子层(MAC)。
  • 物理层:与OSI物理层相同。

3.DNS解析过程及缓存

  • 解析过程:包括递归查询和迭代查询,从本地DNS服务器开始,逐步向上至根域名服务器,直至找到目标域名的IP地址。
  • 缓存:在本地DNS服务器和客户端都有缓存机制,减少重复查询,提升效率。

4.HTTP长连接与短连接

  • 长连接(Keep-Alive):单个TCP连接可以用于多次HTTP请求,减少连接建立和关闭的开销,适用于频繁交互场景。
  • 短连接:每次HTTP请求都建立一个新的TCP连接,请求完成后连接关闭,适用于偶尔或一次性请求。

5.HTTPS的工作原理及与HTTP区别

工作原理:在HTTP基础上加入SSL/TLS协议,实现数据加密和身份验证,确保数据传输安全。
HTTP区别:
  • 安全性:HTTPS通过加密保证数据传输安全,HTTP不加密,易被窃听。
  • 开销:HTTPS需要加密处理,消耗更多CPU和内存资源。
  • 端口:HTTP默认端口80HTTPS默认端口443
  • 性能:理论上HTTPS较慢,但实际上优化和硬件加速等因素影响,差距在缩小。

6.HTTPS的优缺点

  • 优点:提供数据加密,增强数据传输安全性;支持身份验证,保护用户免受中间人攻击。
  • 缺点:增加计算资源消耗,可能降低页面加载速度;需要购买和维护SSL证书,增加成本;旧版浏览器或设备可能不支持。
特性 HTTP HTTPS
定义 超文本传输协议,明文传输数据 增强版HTTP,通过SSL/TLS加密数据
安全性 ❌ 低,易遭窃听、篡改 ✅ 高,数据加密,防窃听、篡改
性能 ⚡️ 稍快,无需加密解密 🐢 稍慢,涉及加密解密处理
成本 💰 低成本,无需证书费用 💸 高成本,需要购买SSL证书
信任度 ❓ 无验证,易受中间人攻击 ✅ 验证服务器身份,提升信任度
SEO 😐 无明显影响 😊 搜索引擎偏好,有利于排名
适用场景 内部系统、非敏感信息传输 电商、银行、登录等敏感信息传输

注释:

  • 安全性 : HTTPS通过加密提供了数据的安全性,而HTTP的数据以明文形式传输,容易被截取和篡改。
  • 性能 : HTTP由于不涉及加密处理,因此在传输速度上可能略优于HTTPS,尤其是在资源加载和页面响应时间上。
  • 成本 : 使用HTTPS需要购买和维护SSL证书,这是一笔额外的开销;而HTTP则没有这些成本。
  • 信任度 : HTTPS通过证书验证服务器身份,提高了网站的可信度,有助于防止中间人攻击。
  • SEO : 搜索引擎如Google倾向于给采用HTTPS的网站更高的搜索排名,因为这被视为良好实践的一部分。
  • 适用场景 : 根据数据的敏感性和对外服务的需求,选择适合的协议。对于涉及用户隐私和敏感信息的场景,HTTPS是首选。

7.数字签名与数字证书

  • 数字签名:使用发送者的私钥对消息摘要进行加密,接收者用公钥解密验证,确保消息未被篡改且来自可信源。
  • 数字证书:由权威第三方(CA)签发,包含公钥和持有者身份信息,用于验证服务器身份,确保数据传输安全。

8.Cookie与Session

  • Cookie:储存在客户端的小型文本文件,用于保存用户会话信息或个性化设置,但可被用户禁用或清除。
  • Session:服务器端存储的用户会话信息,通过Session ID与特定用户关联,安全性较高但需管理服务器存储资源,且跨域问题需解决。

9.网络安全与加密技术

SSL/TLS协议细节

  • 握手过程:SSL/TLS握手分为四个主要阶段:握手开始、服务器认证和密钥交换、客户端认证(可选)、密钥材料的生成与验证。在握手过程中,双方协商加密套件、交换必要的密钥材料,并验证对方的身份。
  • 加密套件:决定加密算法的具体组合,包括密钥交换算法、对称加密算法、消息认证码算法和哈希函数,如TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256
  • 版本演进:TLS 1.3相比TLS 1.2做了大量优化,包括更快的握手过程(一次往返即可完成握手)、移除不安全的加密套件、强制使用前向安全算法等。

加密算法

  • 对称加密:如AES(Advanced Encryption Standard),用于加密大量数据,速度快,但密钥需安全共享。常用的模式有CBC、CTR、GCM等。
  • 非对称加密:RSA、ECC(椭圆曲线密码学)等,用于安全地交换对称密钥,速度相对较慢,但解决了密钥分发问题。
  • 哈希函数:如SHA-256,用于数据完整性校验和密码存储安全,不可逆且碰撞难度高

10.网络性能优化

TCP拥塞控制

  • 慢启动:连接初期快速增加拥塞窗口大小,尽快利用带宽。
  • 拥塞避免:当检测到丢包时减小拥塞窗口,避免网络拥塞。
  • 快速重传与恢复:快速响应丢包情况,减少等待时间,快速恢复数据传输速率。

HTTP/2与HTTP/3

  • HTTP/2特性:多路复用(一个TCP连接上并行传输多个请求响应)、头部压缩(HPACK算法减少传输数据量)、服务器推送。
  • HTTP/3:基于QUIC协议,使用UDP而非TCP,解决了TCP队头阻塞问题,实现了更低的延迟和更好的连接复用。

👉: 前端开发之HTTP3

CDN

  • 工作原理:通过在全球部署的边缘节点缓存静态资源,用户请求时从最近的节点获取内容,减少延迟,提高访问速度和可用性。工作原理:通过在全球部署的边缘节点缓存静态资源,用户请求时从最近的节点获取内容,减少延迟,提高访问速度和可用性。
  • 智能调度:根据地理位置、网络状况、负载情况等动态分配用户请求到最佳节点。
相关推荐
狂炫冰美式5 分钟前
不谈技术,搞点文化 🧀 —— 从复活一句明代残诗破局产品迭代
前端·人工智能·后端
xw51 小时前
npm几个实用命令
前端·npm
!win !1 小时前
npm几个实用命令
前端·npm
代码狂想家1 小时前
使用openEuler从零构建用户管理系统Web应用平台
前端
dorisrv2 小时前
优雅的React表单状态管理
前端
蓝瑟3 小时前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
dorisrv3 小时前
高性能的懒加载与无限滚动实现
前端
韭菜炒大葱3 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
StarkCoder3 小时前
求求你,别在 Swift 协程开头写 guard let self = self 了!
前端
清妍_3 小时前
一文详解 Taro / 小程序 IntersectionObserver 参数
前端