http协商缓存和强缓存

强缓存

强缓存则不需要向服务器发送请求,而是从浏览器读取缓存内容(内存缓存|硬盘缓存)

  • 内存缓存:存储在浏览器内存中,一般刷新浏览器会从内存缓存中获取到缓存内容,优点速度快,缺点关闭浏览器缓存丢失
  • 硬盘缓存:存储在计算机硬盘中,空间大,读取效率慢
强缓存案例(expires)

1 Expires:该字段指定响应的到期时间,既资源不在被视为有限的日期和时间,它是一个有限的HTTP/1.0 的头部字段,仍然被一些服务端和客户端使用。

Expires的判断机制是:当客户端请求资源时,会获取本地时间戳,然后拿本地时间戳与Expires设置的时间做对比,如果对比成功,则走强缓存,对比失败,则向服务器发送请求

import express from "express";
import cors from "cors"; // 跨域
import crypto from "node:crypto";
import fs from "node:fs";

const app = express();
app.use(cors()); // 解决跨域

// 动态资源接口缓存
// Expires 强缓存
// 使用new Date 转换为UTC时间,到这个时间之前,都可进行缓存住
app.get("/api", (req, res) => {
  res.setHeader("Expires", new Date("2024-5-6 12:23:45").toUTCString());
  res.send("hello");
});

app.listen(3000, () => {
  console.log("server running is 3000");
});

html调用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">测试缓存</button>
    <script>
      const btn = document.getElementById("btn");
      btn.onclick = function () {
        fetch("http://localhost:3000/api");
      };
    </script>
  </body>
</html>

2 Cache-Control 缓存 (配置内容)

  • max-age:浏览器资源缓存的时长(秒)。
  • no-cache:不走强缓存,走协商缓存。
  • no-store:禁止任何缓存策略。
  • public:资源即可以被浏览器缓存也可以被代理服务器缓存(CDN)。
  • private:资源只能被客户端缓存。
import express from "express";
import cors from "cors"; // 跨域
import crypto from "node:crypto";
import fs from "node:fs";

const app = express();
app.use(cors());

// Cache-Control 强缓存
// 第一个参数public: 表示任何服务器都可以缓存包括代理服务器,CDN
// 若设置为private: 表示只能浏览器进行缓存, 不包含代理服务器
// max-age: 表示缓存多长时间,以 秒 为单位
// Expires Cache-Control 同时出现的话,则依Cache-Control 设置的max-age时间为准
app.get("/api2", (req, res) => {
  res.setHeader("Cache-Control", "public,max-age=10");
  res.send("Cache-Control");
});

app.listen(3000, () => {
  console.log("server running is 3000");
});

html 调用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">测试缓存</button>
    <script>
      const btn = document.getElementById("btn");
      btn.onclick = function () {
        fetch("http://localhost:3000/api2");
      };
    </script>
  </body>
</html>

协商缓存

  • 缓存机制:强缓存会优先于协商缓存。若是不存在强缓存,则在协商缓存中,客户端会发送带有缓存数据标识的请求头部字段,向服务器验证资源的有效性。服务器会根据客户端发送的协商缓存字段(如If-Modified-Since和If-Node-Match)来判断资源是否发生变化。如果资源未发生修改,服务器会返回状态吗:304(Not Modified),通知客户端可以使用缓存的版本。如果资源发生变化,服务器将返回最新的资源,状态码为:200

  • 协商缓存(Last-Modified)需与If-Modified-Since配合

Last-Modified 和 If-Modified-Since:服务器通过 Last-Modified 响应头告知客户端资源的最后修改时间。客户端在后续请求中通过 If-Modified-Since 请求头携带该时间,服务器判断资源是否有更新。如果没有更新,返回 304 状态码。

import express from "express";
import cors from "cors"; // 跨域
import crypto from "node:crypto";
import fs from "node:fs";

const app = express();
app.use(cors());

// 协商缓存

const getFileModfiedTime = () => {
  return fs.statSync("./index.js").mtime.toISOString();
};

app.get("/api3", (req, res) => {
  // 获取浏览器设置的if-modified-since
  const ifModifiedSince = req.headers["if-modified-since"];
  const modifiedTime = getFileModfiedTime();
  // 如果浏览器的时间 与 服务器给设置的时间一致,则走协商缓存
  if (ifModifiedSince === modifiedTime) {
    console.log("缓存了");
    res.statusCode = 304;
    res.send();
    return;
  }
  // 设置取消强缓存,使用协商缓存
  res.setHeader("Cache-Control", "no-cache");
  // 服务器 设置 协商缓存 时间
  res.setHeader("Last-Modified", modifiedTime);
  res.send("Last-Modified");
});

app.listen(3000, () => {
  console.log("server running is 3000");
});

  • 协商缓存 ETag 需与 if-none-match 配置
import express from "express";
import cors from "cors"; // 跨域
import crypto from "node:crypto";
import fs from "node:fs";

const app = express();
app.use(cors());

// Etag 可通过文件生成hash
const getFileHash = () => {
  return crypto
    .createHash("sha256")
    .update(fs.readFileSync("index.js"))
    .digest("hex");
};

app.get("/api3", (req, res) => {
  // 获取浏览器设置的if-modified-since
  const ifNoneMatch = req.headers["if-none-match"];
  const etag = getFileHash();
  // 如果浏览器的时间 与 服务器给设置的时间一致,则走协商缓存
  if (ifNoneMatch === etag) {
    console.log("缓存了");
    res.statusCode = 304;
    res.send();
    return;
  }
  // 设置取消强缓存,使用协商缓存
  res.setHeader("Cache-Control", "no-cache");
  // 服务器 设置 协商缓存 时间
  res.setHeader("ETag", etag);
  res.send("Etag");
});

app.listen(3000, () => {
  console.log("server running is 3000");
});

  • 同时设置了ETag 和Last-Modified 则Etag会优先级更高,etag相同,在用Last-Modified进行判断对比。

  • 既然有了Last-Modified为什么要用Etag
    1 Last-Modified以秒为单位,如果不超过1s内不会检测到资源发送改变。
    2 资源走完一个生命周期回到原来的状态,其实没发生改变,但会会判断发生改变。
    3 因为Etghash值内容是唯一的,通过对比就很快知道资源是否发送改变。

上一篇:Go语言中,两个比较流行的缓存库-1. go-cache


下一篇:redis最全面试题-内存相关