缓存

那你笑一个嘛
72 阅读4分钟

缓存

浏览器向服务器发送请求时，服务器会将缓存规则放入响应报文的HTTP（Response Headers）头中和请求结果一起返回给浏览器

强缓存优先于协商缓存 
code : 
304 缓存命中 
200 缓存已过期，返回最新的数据及缓存标识

  1. 强缓存

    • Cache-control（优先级较高）
    max-age：31536000 缓存内容将在xxx秒后失效 

public：所有内容都将被缓存（客户端和代理服务器都可缓存）

private：所有内容只有客户端可以缓存，Cache-Control的默认取值

no-cache：客户端强制缓存失效，由服务端指定缓存规则（是否使用协商缓存

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
    • Expires
    Expires 其值为服务器返回该请求结果缓存的到期时间，再次发起请求时，如果客户端的时间小于Expires的时间，则使用缓存结果
Expires 是HTTP/1.0 的产物，到了HTTP/1.1已经被Cache-control 代替，因为它原理是客户端请求的缓存时间和服务器端返回的时间做对比，可能会出现时区不同的情况

image.png tips：两者同时存在时以cache-control为准

缓存命中返回 304 否则返回 200 及最新的缓存标识
cache-control：max-age=600 为相对值 在600秒内再次发送请求 强制缓存生效
expires ：Tue, 17 May 2022 08:43:48 GMT 为绝对值 请求服务端的时间小于expires记录的时间强制缓存生效

  1. 协商缓存

    • Last-Modified / If-Modified-Since
    服务器响应请求时，该资源文件在服务器最后被修改的时间
1.If-Modified-Since是客户端再次发起请求时，携带上次返回的 Last-Modified 的值
2.通过这个值告诉服务器，该资源上次最后被修改的时间，服务器收到该请求，发现请求头中包含 If-Modified-Since 的字段
3.则根据If-Modified-Since值与该资源在服务最后被修改的时间做对比
4.若服务器该资源最后被修改的时间大于 If-Modified-Since 携带的值则返回最新的资源及缓存标识，code 码 200
5.否则返回 304 ，代表该资源无更新可以继续使用缓存
    • Etag / If-None-Match（优先级较高）
    返回当前资源文件的一个唯一标识(由服务器生成)
1.If-None-Match 是客户端再次发起请求时，携带上次返回的唯一标识 Etag 的值
2.通过这个值告诉服务器，该资源文件的唯一标识，服务器收到请求后，发现该请求头中包含 If-None-Match 的字段
3.则会将服务器当前的 Etag 的值和 If-None-Match 的携带值对比，不相同则返回最新的资源及最新的缓存标识，code 码 200
4.否则返回 304 ，代表该资源无更新可以继续使用缓存

image.png tips：两者同时存在时以Etag为准，因为服务器记录的 Last-Modified 缓存时间是到秒，对于计算机来说1秒已经算长啦

Etag: "d9908174e594415b46bbdf10e77449e4-1"  对比服务器ID对比相等则缓存生效
Last-Modified:Tue, 30 Mar 2021 22:13:06 GMT 大于服务器资源最后修改则缓存生效

缓存的存储位置

  1. （内存缓存）memory cache
  • 数度快和时间限制
  1. （硬盘缓存）disk cache
  • 硬盘缓存是直接将缓存文件写入硬盘文件中，读取缓存需要对存放该缓存的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢

读取顺序：浏览器读取缓存顺序为 memory cache --> disk cache --> 服务器请求

缓存方式：在浏览器中，浏览器会在js和图片文件解析后存入内存缓存，那么刷新页面后就可以直接在内存缓存中读取（memory cache）而css文件则会存入硬盘中，所以每次渲染页面都需要从硬盘缓存中取（disk cache）

avatar
文章
阅读
粉丝