千语前端

了解前端缓存

2/28/2022 网络

# 了解前端缓存

前端缓存分为HTTP缓存和浏览器缓存。HTTP缓存是在HTTP请求传输时用到的缓存，在服务器上设置；浏览器缓存则主要由前端开发在前端设置；

  1. # HTTP缓存

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

# 1.1 强制缓存

强缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。

  • 1.不存在该缓存结果和标识，强制缓存失效，直接向服务器发送请求。
  • 2.存在该缓存结果和缓存标识，但结果已失效，则使用协商缓存；
  • 3.存在该缓存结果和缓存标识，且结果未失效，强制缓存生效，直接返回该结果；

浏览器在向服务器发送请求时，服务器会将缓存规则放入HTTP响应报文的头中和响应结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Control优先级比Expires高；

  • Expires 过期时间
  • Cache-Control max-age=XXX 缓存多少秒后失效，这个优先级高于Expires

# 1.2 协商缓存

协商缓存就是强制缓存第二种情况，结果已失效的时候，浏览器会携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

  • 1.协商缓存生效。返回304，直接使用浏览器缓存；
  • 2.协商缓存失效，返回200和请求结果； 同强制缓存一样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别是 Last-Modified/If-Modified-Since 和 Etag/If-None-Match.其中Etag/If-None-Match优先级更高；
  • Last-Modified(服务器返回时)/If-Modified-Since(浏览器请求时) Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间； If-Modified-Since 是客户端再次发起请求时所携带的Last-Modified的值，通过此字段来告诉服务器该资源上次请求的最后修改时间； 如果服务器最后修改资源时间大于此值，则缓存失效，重新返回资源，状态码200；否则返回304，代表资源无更新；
  • Etag(服务器返回时)/If-None-Match(服务器返回时) Etag是服务器响应请求时，返回当前资源文件的唯一标识，由服务器生成； if-None-Match是由客户端再次发起该请求时所携带的Etag的值，通过此字段来告诉服务器该资源上次请求时的唯一标识。服务器收到该值后会与所在服务器的Etag值做对比，如果不一致，则重新返回资源，状态码200；否则返回304，代表资源无更新；

  1. # 浏览器缓存

# 2.1 Cookie

  • name和value name是cookie的名称，cookie一旦创建，名称就不可更改；value是对应的cookie的值

  • Domain domain决定cookie在哪个域是有效的

  • Path cookie的有效路径

  • Expires/Max-age 均为cookie的有效期。Expires是cookie被删除时的时间戳，若设置为以前的时间，则立即被删除；不设置默认页面关闭时删除； Max-age也是cookie的有效期，但它的单位是秒，是多长时间后失效，若Max-Age的时间为0，立即失效，设置为负数则页面关闭时失效；

  • Size cookie的大小

  • httpOnly 设为true时，不允许根据document.cookie去更改这个值；

  • secure 设为true时，浏览器不会在HTTP传输此cookie，只会在HTTPS和SSL等安全协议中使用；

  • SameSite 限制来自第三方的cookie，从而减少安全风险；

  • Priority 优先级，当cookie的数量超出时，低优先级的cookie会被优先删除；

# 2.2 localStorage

  • 在同源的所有标签页和窗口之间共享数据
  • 数据不会过期。它在浏览器重启甚至系统重启后仍然存在；

# 2.3 sessionStorage

  • sessionStorage仅存在于当前浏览器标签页；
  • 具有相同页面的另一个标签页将会有不同的存储；
  • 数据在页面刷新后仍然保留，但是在关闭、重新打开浏览器标签页之后不会保留；