zhangdizhangdi

缓存

概述

bash
# 强缓存
## 响应头
Cache-Control: public, max-age=31536000 # HTTP/1.1
Expires: Wed, 27 Mar 2024 04:04:12 GMT # HTTP/1.0

# 客户端强刷新时
## 请求头
Cache-Control: no-cache

# 协商缓存
## HTTP/1.1
### 响应头
Etag: W/"d560a7369422cb8945626108e439aaf1"
### 请求头
If-None-Match: W/"d560a7369422cb8945626108e439aaf1"

## HTTP/1.0
### 响应头
Last-Modified: Wed, 27 Mar 2024 00:35:11 GMT
### 请求头
If-Modified-Since: Wed, 27 Mar 2024 00:35:11 GMT

缓存
图：缓存

强缓存

当命中强缓存的时候，客户端不会再发请求，直接从缓存中读取内容
并返回状态码 200 OK (from disk cache) 200 OK (from memory cache)

Cache-control

HTTP/1.1 的产物，目前主要使用字段。

响应头

值 说明
max-age 决定客户端资源被缓存多久，单位：秒
no-cache 进行 协商缓存
no-store 禁止任何缓存
public 资源即可以被浏览器缓存也可以被代理服务器缓存
private 表示资源只能被浏览器缓存

请求头

值 说明
no-cache 协商缓存

更多值参考：

Expries

HTTP/1.0 的产物，其给出了缓存过期的绝对时间，是一个 GMT 格式的标准时间，这个时间依赖于客户端的时间，如果时间不准确或者被改动缓存也会随之受到影响。缓存过期以后，服务器不管文件有没有变化会再次请求服务器。

Pragma

HTTP/1.0 的产物，其取值为 no-cache，和 Cache-Control 的 no-cache 效果一样。

协商缓存

  • 如果没有改变，返回状态码304 Not Modified，之后从缓存中读取文件。
  • 如果有改变，返回状态码200 OK及新文件。

Etag / If-None-Match

HTTP/1.1的产物，Etag 是由文件内容的 hash 值和内容长度计算而成，只有当文件文件内容发生变化了Etag的值才会发生变化。

bash
# 请求头
If-None-Match: W/"d560a7369422cb8945626108e439aaf1"
# 响应头
Etag: W/"d560a7369422cb8945626108e439aaf1" 或 "6550cb55b0e3bd10f520400d30c97c02"

带 W/ 代表 弱校验

参考：一文讲透HTTP缓存之ETag - 掘金

Last-Modified / If-Modified-Since

HTTP/1.0的产物

bash
# 响应头
Last-Modified: Wed, 27 Mar 2024 00:35:11 GMT
# 请求头
If-Modified-Since: Wed, 27 Mar 2024 00:35:11 GMT

设置缓存

两种方式：

  • 后端代码添加
  • Nginx配置

缓存方案：

  1. 协商缓存：频繁变动的资源，如 html文件

    Cache-Control: no-cache

  2. 强缓存：不常变动的资源，如文件名打包带上hash的css、js、图片，第三方库文件

    Cache-Control: public, max-age=2592000

缓存位置

  • Service Worker
  • Memory Cache（内存）
  • Disk Cache（硬盘）
    • prefetch cache
  • Push Cache （h2 服务端推送）

Memory Cache

容量小，读取快，存储时间短。
会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

Disk Cache

容量大，存储时间长。

刷新

  • 浏览器地址栏中写入URL，回车
    • Chrome：从 disk cache 里查找强缓存
  • 普通刷新
    • Chrome：使用强缓存
  • 强制刷新 或 浏览器选择 “Disable cache”
    • Chrome：使用协商缓存，请求头携带：Cache-Control: no-cache

参考