HTTP/1
keep-alive(可以重复使用链接)
由于建立一个链接的过程需要DNS解析过程和TCP的三次握手,但在同服务器获取资源不断的建立和断开链接需要消耗资源和时间是巨大的,为了提高链接的效率。
Pipeline(管线化)
一次链接上多个http request不需要等待response就可以连续发送的
http1缺陷
- 高延迟,带来页面加载速度的降低,(网络延迟问题只要由于队头阻塞,导致宽带无法被充分利用)
- 无状态特性,带来巨大的Http头部
- 明文传输,不安全
- 不支持服务器推送消息
HTTP2
二进制分帧传输数据
HTTP采用二进制格式传输数据,HTTP1是文本格式
头部压缩
HTTP1会在请求和响应中重复携带不常改变的、冗长的头部数据,给网络带来额外的负担 HTTP2在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键值对,对于相同的数据,不再通过每次请求和响应发送
多路复用:主要是解决http对头阻塞问题
HTTP1,如果想并发多个请求,必须使用多个TCP链接,且浏览器为了控制资源,还会对单个域名有6-8个的TCP链接请求限制。 HTTP2中同域名下所有通信都在耽搁链接上完成,耽搁链接可与你承载任意数量的双向数据流。
HTTP3
0-RTT链接【会话中可以直接发送加密后的数据,不需要TLS握手】
解决队头堵塞
HTTP/2 之所以存在 TCP 层的队头阻塞,是因为所有请求流都共享一个滑动窗口,而QUIC中给每个请求流都分配一个独立的滑动窗口。
链接迁移
HTTP和HTTPS的区别
- 端口:HTTP默认使用80端口,HTTPS默认使用443端口
- 安全性:HTTP协议所有传输都是明文传输,信息易泄漏,HTTPS添加SSL/TLS协议,所有的传输内容经过加密及安全认证,保证数据传输的安全性。
SSL协议(加密过程:【对称加密、非对称加密】)
https同时使用三组加密:
- 1:
对称加密就是,发送端和接收端都使用同一个秘钥,发送端用这个秘钥结合一种算法对数据进行加密,接收用这个秘钥结合一种算法对数据进行解密。常见的对称加密算法:DES、AES等 非对称加密:有两个密钥,一个公钥,一个私钥。公钥加密的数据,只有对应的私钥才可以解密。(RSA、ECC)- 2:
混合加密- TLS/SSL 握手阶段:用于建立安全的连接通道(非对称加密)
- 数据传输阶段:通道建立好之后,开始传输数据(对称加密)
- CA证书
HTTP的状态码
2XX成功
-
200 OK,表示从客户端发来的请求在服务器端被正确处理 ✨
-
201 Created 请求已经被实现,而且有一个新的资源已经依据请求的需要而建立
-
202 Accepted 请求已接受,但是还没执行,不保证完成请求
-
204 No content,表示请求成功,但响应报文不含实体的主体部分
-
206 Partial Content,进行范围请求 ✨
3XX重定向
-
301 moved permanently,永久性重定向,表示资源已被分配了新的 URL
-
302 found,临时性重定向,表示资源临时被分配了新的 URL ✨
-
303 see other,表示资源存在着另一个 URL,应使用 GET 方法获取资源
-
304 not modified,表示服务器允许访问资源,但因发生请求未满足条件的情况
-
307 temporary redirect,临时重定向,和302含义相同
4XX客户端错误
-
400 bad request,请求报文存在语法错误 ✨
-
401 unauthorized,表示发送的请求需要有通过 HTTP 认证的认证信息 ✨
-
403 forbidden,表示对请求资源的访问被服务器拒绝 ✨
-
404 not found,表示在服务器上没有找到请求的资源 ✨
-
408 Request timeout, 客户端请求超时
-
409 Confict, 请求的资源可能引起冲突
5XX服务器错误
-
500 internal sever error,表示服务器端在执行请求时发生了错误 ✨
-
501 Not Implemented 请求超出服务器能力范围,例如服务器不支持当前请求所需要的某个功能,或者请求是服务器不支持的某个方法
-
503 service unavailable,表明服务器暂时处于超负载或正在停机维护,无法处理请求
-
505 http version not supported 服务器不支持,或者拒绝支持在请求中使用的 HTTP 版本
HTTP请求方法
- GET----表示向服务器获取资源,只应用于数据的读取
- POST----表示向服务器提交信息,产生新的数据
- PUT----表示修改服务器的数据,通常用于修改
- DELETE----表示希望删除服务器的数据
- OPTIONS----检查接口是否可用,发生在跨域的预检请求中。并且返回的响应头部会有Access-Control-Allow-Methods字段,该字段会将所有允许的请求方法告知客户端
HTTP缓存机制
缓存位置
优先级顺序如下:四个缓存位置中的缓存没有命中时,会向服务器发起请求
- Service Workers:注册在指定源和路径下的驱动worker
- Memory Cache:内存中的缓存,会随着进程的释放而释放。内存使用率低、缓存小尺寸资源,优先使用
- Disk Cache:磁盘中的缓存,内存使用率高,缓存大尺寸资源,优先使用
- Push Cache:缓存时间短,只在会话中存在,会话结束被释放
缓存流程:
-
浏览器发送请求到服务器,请求资源。
-
服务器接收到请求,处理后生成响应。
-
服务器在响应头中设置缓存相关的字段,如
Cache-Control和Expires。 -
浏览器接收到响应,检查响应头中的缓存设置。
-
如果浏览器有对应资源的缓存副本,并且缓存未过期(即当前时间小于缓存过期时间),则使用缓存,不发送请求到服务器,直接从缓存加载资源。
-
如果缓存不存在或已过期,浏览器会发送条件请求到服务器,使用协商缓存机制验证资源是否仍然有效。
- 浏览器在请求头中发送上一次请求时服务器返回的标识(如
Last-Modified或ETag)。 - 服务器根据标识进行验证,如果资源未发生变化,返回状态码 304 Not Modified,告知浏览器继续使用缓存。
- 如果资源已经发生变化,服务器返回新的资源,带上新的标识和响应内容。
- 浏览器在请求头中发送上一次请求时服务器返回的标识(如
强缓存(Expires和Cache-Control)
强缓存:浏览器在一定时间内直接使用缓存的资源,不发送请求到服务器。可通过设置响应头中的 Cache-Control 和 Expires 字段来控制缓存策略。
- Cache-Control: Cache-Control 是一个用于控制缓存行为的响应头字段。常见的取值:
public:表示响应可以被客户端和代理服务器缓存。private:表示响应只能被客户端缓存,中间的代理服务器不能缓存。no-cache:表示客户端缓存该资源,但在使用之前必须先与服务器确认是否是最新的。no-store:禁止使用缓存(包括协商缓存),每次都向服务器请求最新的资源max-age=<seconds>:指定资源在缓存中的最大有效时间,单位为秒。
Cache-Control: public, max-age=3600
- Expires: Expires 是一个响应头字段,表示资源的过期时间,是一个具体的日期时间。浏览器会将这个时间与客户端当前时间进行比较,判断资源是否过期。
Expires: Wed, 01 Jun 2023 12:00:00 GMT
协商缓存(Last-Modified和Etag)
强缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定释放使用缓存的过程,分为两种情况:
- 协商缓存生效,返回304和Not Modified
- 协商缓存失效,返回200和请求结果
(Last-Modified/If-Modified-Since和Etag/If-None-Match)
(Last-Modified)是服务器端在响应请求时用来说明资源的最后修改时间。
- 协商缓存过程中,浏览器发送的HTTP请求中Header会带上(If-Modified-Since)字段,值为缓存资源(Last-Modified)属性的值。当服务器端接收到带有(If-Modified-Since)的请求时,则会将(If-Modified-Since)的值与被请求资源的最后修改时间做对比。如果相同,说明资源没有新的修改,则响应HTTP Status Code 304,浏览器会继续使用缓存资源。如果最后修改时间比较新,说明资源被修改过,则响应HTTP Status Code 200,返回最新的资源。
- Etag是服务器响应请求时,返回当前资源文件的一个唯一标识,只要资源有变化,Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时,会将上一次返回的Etag值放到request header里的If-None-Match里,服务器只需要表交客户端传来的If-None-Match跟自己服务器上该资源的Etag是否一致,就可以判断资源相对客户端是否被修改过。如果服务器发现Etag匹配不上,返回200+最新的资源给客户端;如果Etag一致,返回304。
ETag与Last-Modified谁优先
当ETag与Last-Modified同时存在时,服务器先检查ETag,再检查Last-Modified,最终决定返回304还是200
Etag,Last-Modified是否之间有矛盾
不能正确识别文件变化的问题
Service Worker缓存
本质
Service Worker本质上是充当web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。
ServiceWorker生命周期
Service Worker 的生命周期可以分为6个阶段:解析(parsed)、安装(installing)、安装完成(installed)、激活(activating)、激活完成(activated)、闲置(redundant)。
WebSocket
定义:WebSocket 作为一种基于 TCP 协议的实时通信协议,为前端应用提供了强大的双向通信能力。
WebSocket 协议和 HTTP 协议的区别是什么?
- 连接方式:WebSocket 提供持久的连接,通过握手过程建立连接后保持打开状态,而 HTTP 是无状态的,每次请求都需要重新建立连接。
- 数据格式:WebSocket 支持文本和二进制数据的传输,而 HTTP 主要是传输文本数据。
- 数据传输方式:WebSocket 实现了全双工通信,客户端和服务器可以同时发送和接收数据,而 HTTP 是单向的,客户端发起请求,服务器响应数据。
- 协议标识:WebSocket 使用 ws:// 或 wss:// 前缀标识,而 HTTP 使用 http:// 或 https://
WebSocket 的优势
- 实时性:WebSocket 提供了低延迟的实时通信能力,能够在服务器端有新数据时立即推送给客户端。
- 双向通信:WebSocket 支持客户端和服务器之间的双向通信,可以实现实时聊天、实时数据更新等场景。
- 较低的网络开销:WebSocket 使用长连接,相对于频繁的短连接请求,减少了网络开销。
- 更高的性能:由于减少了 HTTP 请求的开销,WebSocket 在性能上更高效。
- 跨域支持:WebSocket 具备跨域通信的能力,可以跨域进行实时通信
WebSocket适用场景
实时聊天应用、股票行情推送、实时协作编辑、多人游戏、实时数据监控等需要实时双向通信的场景。
WebSocket 的事件
open:当 WebSocket 连接成功建立时触发的事件。可以在此事件中执行初始化操作或向服务器发送初始数据。message:当从服务器接收到新消息时触发的事件。可以在此事件中处理接收到的数据。error:当出现连接错误时触发的事件。错误可能包括连接失败、数据传输错误等。可以在此事件中处理错误并采取适当的措施。close:当 WebSocket 连接关闭时触发的事件。关闭可能是由服务器或客户端发起的,可以在此事件中执行清理操作或重新连接等操作。
如何避免前端请求明文传输
HTTPS加密传输:使用 HTTPS 协议发送请求,所有的数据都会在传输过程中进行加密,从而保护数据不以明文形式传输数据加密处理:前端对敏感数据进行加密处理,然后再发送请求(加密算法:AES、RSA等)请求签名验证:在发送请求之前,前端对请求参数进行签名处理,并将签名结果和请求一起发送到服务器。服务器端根据事先约定的签名算法和密钥对请求参数进行验证,确保请求的完整性和可靠性。Token验证:在用户登录时,后端会生成一个 Token 并返回给前端,前端在发送请求时需要将 Token 添加到请求头或请求参数中。后端在接收到请求后,验证 Token 的有效性,以确保请求的合法性。请求头加密处理:在发送请求时,可以将请求头中的一些关键信息进行加密处理,然后再发送到服务器。服务器端需要在接收到请求后对请求头进行解密,以获取其中的信息。
web端即时通讯技术
轮询
浏览器每隔一段时间发送Http请求,服务端收到请求后,不论是否有数据更新,都直接进行响应。
长轮询
服务器收到客户端的请求后,不会立即进行响应,先将这个请求挂起,然后判断服务器端数据是否有更新,有更新,则响应。如果一直没有数据,到达一定的时间限制才返回。
长连接
不需要客户端发送请求,只要服务端数据有更新,就发送到客户端