复习前端:前端应掌握的网络知识

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 笔记

21.png今天来复习与前端开发相关的一些网络知识,简单介绍网络七层模型 OSI、HTTPS状态码、GET和POST方法区别、HTTP/1.0和HTTP/1.1有什么区别等。

系列文章:


七层网络OSI模型,TCP/IP和HTTP位于哪一层?


1.1 物理层

  • 概述:连接到互联网的物理层。网络(本地或全球)中的所有组件都通过电缆(网线、光纤等)或无线(wi-fi)等物理传输介质相互连接。
  • 单位:位。

1.2 数据链路层

  • 概述:数据链路层将比特封装成数据帧并进行传输。它是 OSI 中的数据链路层,负责在 Internet 中的物理设备之间建立连接。因此,互联网只是一堆通过物理层相互连接的计算机,以太网作为定义数据传输方式的协议。以太网协议遵循 IEEE 802.3 标准,是 MAC 地址 + 数据有效载荷 + CRC 校验和的组合
  • 单位:帧。

1.3 网络层

  • 概述:定义 IP 地址,定义路由功能,建立主机到主机的通信。
  • 单位:包。

1.4 传输层

  • 概述:负责可靠或不可靠的数据传递以及建立端口到端口的通信。网络层协议负责连接设备之间的握手,确保数据包按正确顺序发送,通过校验和确保所有层的数据完整性,控制数据流速度,多路复用等。常用的传输控制协议/互联网协议(TCP/IP ) 是 TCP、UDP 等。
  • 单位:数据段。

1.5 会话层

  • 概述:控制应用程序之间的会话能力,区分不同的进程。

1.6 表现层

  • 概述:数据格式识别、基本压缩和加密功能。

1.7 应用层

  • 概述:提供用户应用程序进程与底层数据网络之间的接口,是唯一与最终用户交互的层。应用层仅对通信进行标准化,完全依赖底层传输层协议建立主机到主机的数据传输通道,并管理客户端-服务器或对等网络模型中的数据交换。最常用的应用层协议是 http、ftp、mqtt、websockets 等。


常见的HTTP状态码有哪些


2.1 以2xx开头(请求成功)

  • 200 OK:前端(客户端)向服务器发送的请求被正常处理并返回。

2.2 3xx开头(重定向)

  • 301 Moved Permanently:永久重定向,请求的网页已经永久移动到新的位置。当服务器返回此响应时,它会自动将请求者转发到新位置。
  • 302 Moved Permanently:临时重定向,所请求的网页已被临时移动到新的位置。服务器当前正在响应来自不同位置的网页的请求,但是请求者应该继续使用原来的位置来进行以后的请求。
  • 304 Not ModifiedNot Modified,请求的页面自上次请求后没有被修改过。服务器返回此响应时不会返回网页内容。

2.3 以4xx开头(客户端错误)

  • 400 Bad Request:错误请求,服务器不理解请求的语法,常见于前端(客户端)传递参数错误。
  • 401 Unauthorized:未授权,表示发送的请求需要通过HTTP认证的认证信息,常见于前端(客户端)未登录的情况。
  • 403 ForbiddenForbidden 服务器拒绝请求,通常是由于前端(客户端)权限不足。
  • 404 Not Found:没有找到,服务器找不到对应的资源。

2.4 以5xx开头(服务器错误)

  • 500 Inter Server Error:内部服务器错误,服务器遇到错误,无法完成请求。
  • 501 Not Implemented:尚未实现,服务器无法完成请求。
  • 502 Bad Gateway:当作为网关或代理的服务器尝试执行请求时,从上游服务器收到无效响应。
  • 503 服务不可用:服务不可用,服务器当前不可用(过载或停机维护),通常是一个临时状态。


GET请求和POST请求有什么区别


  • GET 请求参数放在URL上,POST 请求参数放在请求体中(Request Body)。
  • GET 请求参数长度有限制,POST 请求参数长度可以很大。
  • POST 请求比 GET 请求安全一点,因为 GET 请求的参数在 URL 上并且有历史记录。
  • GET 请求可以被缓存,但是 POST 不会。

HTTP协议不要求 GET/POST 请求参数必须放在URL或请求体中,也没有规定GET请求的长度。当前的 URL 长度限制是每个浏览器设置的限制。GETPOST 的根本区别在于:GET 请求是幂等的,而 POST 请求不是。

幂等性意味着对资源的一个或多个请求具有相同的副作用。例如,查找是幂等操作,而删除和添加不是幂等操作。

由于 GET 请求是幂等的,在恶劣的网络环境下,可能会反复尝试 GET 请求,造成重复数据操作的风险。因此,GET 请求用于无副作用的操作(如搜索)、增/删等操作适合 POST


HTTP/1.0和HTTP/1.1有什么区别


  • 长连接HTTP/1.1 支持长连接和请求管道,可以在一个TCP连接上发送多个HTTP请求,避免了多次建立TCP连接的时间消耗和延迟。
  • 缓存处理HTTP/1.1 引入了 Entity 标签、If-Unmodified-SinceIf-MatchIf-None-Match 等新的请求头来控制缓存。
  • 带宽优化和网络连接的使用HTTP1.1 在请求头中引入了 range 头字段,支持断点续传的功能。
  • 主机头处理:在 HTTP/1.0 中,认为每台服务器都有一个唯一的IP地址,但随着虚拟主机技术的发展,多台主机共享一个IP地址的情况越来越普遍。HTTP1.1 的请求报文和响应报文都应该支持 Host 头域,如果请求报文中没有Host头域,就会出现400错误。


HTTP/2.0的新特性


  • 多路复用:即多个请求通过一个TCP连接并发完成。
  • 服务端推送:服务端可以主动向客户端推送资源。
  • 新的二进制格式HTTP/2 使用二进制格式传输数据。与 HTTP/1.1 的文本格式相比,二进制格式具有更好的解析性和扩展性。
  • 标头压缩HTTP/2 压缩消息标头,减少传输数据的大小。


HTTP/2.0多路复用的基本原理及其解决的问题


HTTP/2 解决的问题就是 HTTP/1.1 中存在的问题。

TCP慢启动:TCP连接建立后,会经历一个先慢后快的发送过程,就像汽车发动一样。如果网页文件(HTML/JS/CSS/icon)都经过慢启动,不会影响性能小损失。另外,慢启动是TCP用来减少网络拥塞的一种策略,目前也没有办法改变它。多个TCP连接争夺带宽:如果同时建立多个TCP连接,当带宽不足时,它们会争夺带宽,影响关键资源的下载。HTTP/1.1 队头阻塞:虽然 HTTP/1.1 长链接可以通过单个TCP连接传输多个请求,但同时只能处理一个请求,其他请求只能阻塞到当前请求结束。 为解决上述问题,一个 HTTP/2 域名只使用一个TCP长连接传输数据,请求直接并行无阻塞,这就是多路复用。

实现原理:HTTP/2 引入了二进制框架层。客户端和服务端传输时,数据会经过二进制分帧层处理,转换成带有请求ID的帧。传输完成后,这些帧根据ID组合成相应的数据。


HTTP和HTTPS有什么区别


  • HTTPS 使用默认端口 443 ,而 HTTP 使用默认端口是 80。
  • HTTPS 需要证书。
  • HTTP是超文本传输协议,是明文传输,HTTPS是SSL加密协议,传输更安全。
  • HTTPS 比 HTTP 慢是因为 HTTPS 除了 TCP 握手的三个数据包外,还增加了 SSL 握手的九个数据包。


HTTPS是如何加密的


通过分析几种加密方式,循序渐进了解HTTPS的加密方式以及使用它的原因。

对称加密

前端(客户端)和服务器共享一个密钥来加密和解密消息,这称为对称加密。前端(客户端)和服务器就加密密钥达成一致。前端(客户端)在发送消息前使用密钥对消息进行加密,发送给服务器后,服务器使用密钥对消息进行解密得到消息。

这种方式在一定程度上保证了数据的安全,但是一旦密钥泄露(密钥在传输过程中被截获),传输内容就会暴露,所以需要想办法安全传输密钥。

非对称加密

使用非对称加密时,前端(客户端)和服务端都有公钥和私钥,公钥加密的内容只有对应的私钥才能解密。私钥自己保管,公钥发给对方。这样,消息在发送前先用对方的公钥加密,收到后用自己的私钥解密。这样,攻击者只能得到传输过程中的公钥,无法破译传输内容。

非对称加密虽然解决了因获取密钥而导致传输内容泄露的问题,但是中间人仍然可以通过篡改公钥获取或篡改传输内容,非对称加密的性能不如对称加密。

第三方认证

上述方式的弱点在于前端(客户端)不知道公钥是服务端返回的还是中间人返回的,所以引入第三方认证环节:即第三方使用私钥加密公钥key, 浏览器内置了一些权威的第三方认证机构的公钥。浏览器会使用第三方公钥来解开我们用第三方私钥加密后的公钥,得到公钥。如果能解密成功,说明获取的公钥是正确的。

但是,第三方认证并没有彻底解决问题。第三方认证是大家的,中介也可以申请证书。如果中介用自己的证书代替原来的证书,前端(客户端)仍然无法确认公钥的真实性。

数字签名

为了让前端(客户端)能够验证公钥的来源,在公钥上添加了数字签名。这种数字签名是通过对企业、网站等各种信息和公钥进行单向哈希得到的。一旦构成数字签名的信息发生变化,哈希值就会发生变化,从而构成公钥来源的唯一标识。

具体来说,服务器在本地生成一对密钥,然后拿着公钥和企业、网站等各种信息到CA(第三方认证中心)申请数字证书。CA会使用一种单向散列算法(比如MD5),生成一串摘要,这串摘要就是这堆信息的唯一标识,然后CA也会用自己的私钥对摘要进行加密并将其与我们服务器的公钥一起发送给我们。

浏览器获得数字签名后,会使用浏览器本地内置的CA公钥对数字证书进行解锁和验证,得到正确的公钥。由于非对称加密的性能较低,前端(客户端)在获得公钥后,会随机生成一个对称密钥,用这个公钥加密,发送给服务器,服务器用自己的私钥解锁对称密钥,以及随后的加密 连接使用此对称密钥进行对称加密。

综上所述,HTTPS在验证阶段采用非对称加密+第三方认证+数字签名的方式获取正确的公钥,获取正确的公钥后采用对称加密方式进行通信。


总结


本文从前端开发的角度出发复习网络相关知识,都是一些基本的,在前端开发中可能会涉及到的一些知识点。


相关文章
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
111 1
|
4月前
|
前端开发 算法 网络协议
如何学习计算机基础知识,打好前端和网络安全的基础
如何学习计算机基础知识,打好前端和网络安全的基础
60 4
|
4月前
|
前端开发 安全 网络安全
前端必备网络安全知识
【8月更文挑战第25天】前端必备网络安全知识
64 1
|
4月前
|
数据采集 资源调度 JavaScript
Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
【8月更文挑战第4天】Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
65 5
|
5月前
|
域名解析 缓存 网络协议
前端必备的网络知识 DNS CDN
前端必备的网络知识 DNS CDN
53 0
|
7月前
|
存储 缓存 监控
深入理解前端性能优化:从网络到渲染
网络优化包括减少HTTP请求、使用HTTP/2、开启GZIP压缩和缓存策略。资源加载优化涉及懒加载、预加载和预读取。渲染优化建议使用Critical CSS、减少CSS和JavaScript阻塞以及避免强制同步布局。Service Worker实现离线存储,性能监控使用Lighthouse等工具。动态导入和代码拆分减少初始加载时间,响应式图片适应不同设备。Web Workers处理耗时任务,避免内存泄漏。
94 3
|
7月前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
7月前
|
存储 XML 前端开发
【Flutter前端技术开发专栏】Flutter中的网络请求与数据处理
【4月更文挑战第30天】本文介绍了Flutter开发中的网络请求和数据处理。 Flutter开发者可选择http(官方库)或dio(功能更强大)进行网络请求。http库简单易用,dio支持更多功能如拦截器。数据处理涉及JSON和XML解析,数据存储可选SharedPreferences或Hive,数据传递推荐使用InheritedWidget或Provider状态管理库。了解这些知识点能提升Flutter开发效率。
180 0
【Flutter前端技术开发专栏】Flutter中的网络请求与数据处理
|
7月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
52 0
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
7月前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
164 3
下一篇
DataWorks