前端八股总结分支-缓存

详细总结web缓存和HTTP缓存

（1）HTTP缓存—-强缓存和协商缓存

浏览器每次发起请求都会先在浏览器缓存中查找该请求的结果以及缓存标识

浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

缓存可以解决什么问题：

• 减少不必要的网络传输，节约带宽
• 更快的加载界面
• 减少服务器负载，避免服务器过载的情况出现

缺点：占用内存

CSS、媒体文件、字体文件、CDN加载的资源

🦆强缓存（从内存/磁盘中读取）

从内存读取的缓存更快

🔸定义

• 强缓存是在资源未过期的情况下，直接使用缓存中的资源，而不需要与服务器进行任何交互。这种缓存机制通过HTTP响应头来设置资源的过期时间，通常使用Cache-Control 和 Expires 头来控制。

🔸工作原理

• 当浏览器请求资源时查看强缓存是否有效。如果有效，浏览器直接使用缓存的资源，而不会向服务器发送请求；如果缓存已过期，浏览器会重新向服务器请求资源。

🔸相关HTTP响应头

eg：Cache-Control: max-age=10（从第一次请求资源时开始，往后10秒内再次请求就直接从内存中读取，不需要与服务器做任何交互）

• Cache-Control：设置缓存的策略。如max-age（缓存的最大有效时间）和public/private（资源的可以被浏览器缓存也可以被代理服务器缓存/只能浏览器）。

  • no-cache：强制进行协商缓存
  • no-store：禁止所有缓存
  • 多条属性使用逗号分隔

• Expires：指定资源过期的具体时间（在HTTP/1.0中常用，HTTP/1.1推荐使用Cache-Control）（过度依赖本地时间，未考虑本地时间和服务器时间不同步的情况）

🦢协商缓存

动态内容、频繁更新的API接口返回的数据；敏感数据

🐔基于last-modified的协商缓存

• 第一次请求

  • 首先需要在服务器端读出文件修改时间

  • 将此修改时间赋给响应头的last-modified字段

  • 最后设置Cache-Control：no-cache

• 之后的每一次请求

  • 当客户端读取到last-modified的时候，会在下一次请求头中携带If-Modified-Since ，这个的值就是上面的修改时间。
  • 服务器收到事件后再次读取该资源的修改时间，做对比，如果相等说明未被修改，就返回一个304响应，表示可以直接读取，否则返回新的资源并更新修改时间到last-modified。

缺点：

• 如果仅仅更新文件名也会导致缓存失效
• 如果文件在极短时间内完成修改，由于文件修改最小单位是秒，会导致文件修改时间不变

🐔基于ETag的协商缓存（HTTP1.1开始）

文件指纹：文件打包后输出的文件名的后缀

• 第一次请求资源的时候，服务端读取文件并计算出文件指纹，将文件指纹放在响应头的Etag字段中跟资源一起返回给客户端
• 第二次请求资源的时候，客户端自动从缓存种读取上一次返回的Etag也就是文件指纹，并赋给请求头的If-None-Match字段，让上一次的文件指纹跟随请求一起回到服务端
• 服务端拿到上一次文件指纹，和目标资源的指纹进行对比，如果完全吻合，返回304状态码和空的响应体；如果不吻合说明文件被更改，将新的文件指纹重新存储到响应头的Etag并返回给客户端

计算开销大，不是Last-Modified的完全替代方案

已经设置为强缓存的文件想转化为协商缓存：

• 清除浏览器的缓存
• 修改文件的URL（在JS文件的引入中加入查询参数：版本号或者时间戳；修改文件名）
• Ctrl+F5强制刷新界面
• 浏览器的开发者工具F12设置禁用缓存选项

（2）Cookie和Session

Cookie通过在客户端记录信息确定用户身份，Session在服务端记录信息确定用户身份

🦜Cookie

由于HTTP协议是无连接的协议，一旦数据交换完毕，客户与服务端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。

Cookie的工作原理就是服务器在客户端请求服务器时，如果需要记住用户状态就给客户端颁发一个Cookie（通行证），浏览器保存Cookie，当再次请求的时候，把请求网址和Cookie一起提交给服务器。服务器检查该Cookie就可以辨认用户状态。

🪶特点：

• 一旦创建成功，名称无法修改
• 每个Cookie大小不能超过4kb
• 在请求新的页面时会自动被发送过去
• 两种保存方式：浏览器内存和客户端硬盘

🪶生存周期：

Cookie在生成时会被指定一个Expire值，这就是它的生存周期，超过周期Cookie会被自动删除。如果设置为负值，则关闭浏览器就会失效，浏览器也不会以任何形式保存该Cookie；如果设置为0，表示删除该Cookie。默认为-1 。

🪶缺陷：

• 安全性无法得到保障。收到跨站点脚本攻击时，脚本会读取该站点所有Cookie内容。
• 浏览器可以禁用Cookie

🪶典型应用

• 记住用户偏好，进行个性化设置
• 购物车内容
• 跟踪用户行为（搜索记录等），推送广告

🪶字段

• Name：cookie的名称
• Value：cookie的值，对于认证cookie，value值包括web服务器所提供的访问令牌
• Size： cookie的大小
• Path：可以访问此cookie的页面路径。 比如domain是abc.com，path是/test，那么只有/test路径下的页面可以读取此cookie。（子路径可以，‘/’路径不可以）
• domain：用于指定cookie的可用域名，设置后，这个cookie会对指定的域及其所有指定的子域有效。如果未指定，默认是设置cookie的主机名。
• Secure： 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。
• Expires/Max-size ： 此cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

🐦‍⬛Session

Session机制通过检查服务器上的“客户明细表”来确认客户身份。

Session是服务器端使用的一种记录客户端状态的机制。客户端访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上，这就是Session。相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表即可。

🪽特点：

• 服务端会保存多个客户端的Session，各客户的Session彼此独立，互不可见。
• 使用起来比Cookie方便安全（不会暴露给客户端），但是会对服务器造成压力
• 服务器会向客户端发送sessionID存储到Cookie中，session包含sessionID、用户信息和记录。再次访问时找到发送的Cookie中的sessionID，就可以找到对应的session
• 子窗口会公用父窗口的Cookie
• 存储容量由服务器的处理能力和存储空间决定

🪽生命周期

创建—>存储—>使用—>销毁（到期或关闭浏览器或用户登出）

🪽URL重写

对客户端不支持Cookie的解决方案。将Session的id信息重写到URL地址中，服务器可以解析重写后的URL获取SessionID。

🪽适用场景

存储敏感信息（登陆状态、用户权限）和需要服务器控制的会话信息

（3）webStorage本地存储

🦜localStorage

HTML5引入的新特性。适合大信息量存储

🪶优点：

• 大小：5MB
• 持久存储，不会随着页面关闭而消失；除非主动清理，否则永久存在
• 仅存储在本地，不会像Cookie一样每次HTTP请求都会被携带

🪶缺点：

• 存在浏览器兼容问题，IE8以下的浏览器不支持
• 如果浏览器设置为隐私模式，就无法读取到LocalStorage
• 受到同源策略的限制（LocalStorage的数据只能在相同来源的页面之间共享，不同来源的网站即使在同一浏览器中运行，也无法相互访问对方的LocalStorage数据。）

🪶常用API：

• localStorage.setItem(“key”,”value”); 保存数据
• let data=localStorage.getItem(“key”);获取数据
• localStorage.removeItem(“key”);删除数据
• localStorage.clear();删除所有数据
• localStorage.key(index);获取某个索引的key

🪶使用场景：

• 有些网站具有换肤功能，存储换肤信息；
• 存储浏览信息和不长变动的个人信息
• 可以在表单填写未完成时保存数据，避免用户意外刷新或关闭页面导致信息丢失

🐦‍⬛sessionStorage

HTML5引入的新特性，适合用于仅在会话（session）期间生效的数据存储

🪽和localStorage对比

• SessionStorage和LocalStorage都在本地进行数据存储；大小一样
• SessionStorage也有同源策略的限制，但是SessionStorage有一条更加严格的限制，SessionStorage只有在同一浏览器的同一窗口下才能够共享；
• LocalStorage和SessionStorage都不能被爬虫爬取；
• 刷新界面时不会删除，但是关闭窗口或标签页时会被删除

🪽常用API和local一样

🪽使用场景和session差不多

（4）token

Token 是一种用于身份验证的机制，通常以 JSON Web Token（JWT）形式存在。它由服务器生成并发送给客户端，客户端在后续请求中发送该 Token。

存储方式：通常在客户端存储，可以放在 Cookie、localStorage 或 sessionStorage 中。

生命周期：可以设置过期时间，Token 可以是短期（如访问 Token）和长期（如刷新 Token）。

安全性：Token 通常经过签名，确保数据的完整性和有效性。

可以存储较大的数据量

使用场景：

RESTful API 身份验证和授权。

分布式系统和微服务架构，Token 可以在不同服务间共享。