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值内容是唯一的，通过对比就很快知道资源是否发送改变。

本文链接：https://blog.csdn.net/weixin_39755186/article/details/138225126

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

软件测试流程包括哪些内容？测试方法有哪些？_测试过程管理中包含哪些过程-程序员宅基地

文章浏览阅读2.9k次，点赞8次，收藏14次。测试主要做什么？这完全都体现在测试流程中，同时测试流程是面试问题中出现频率最高的，这不仅是因为测试流程很重要，而是在面试过程中这短短的半小时到一个小时的时间，通过测试流程就可以判断出应聘者是否合适，故在测试流程中包含了测试工作的核心内容，例如需求分析，测试用例的设计，测试执行，缺陷等重要的过程。..._测试过程管理中包含哪些过程

政府数字化政务的人工智能与机器学习应用：如何提高政府工作效率-程序员宅基地

文章浏览阅读870次，点赞16次，收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段，对政府政务进行数字化改革，提高政府工作效率，提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展，政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域，包括政策决策、政府服务、公共安全、社会治理等。在这些领域，人工...

ssm+mysql+微信小程序考研刷题平台_mysql刷题软件-程序员宅基地

文章浏览阅读219次，点赞2次，收藏4次。系统主要的用户为用户、管理员，他们的具体权限如下：用户：用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试，并且查看相关成绩用户可以进行错题集的整理管理员：管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析，并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件

根据java代码描绘uml类图_Myeclipse8.5下JAVA代码导成UML类图-程序员宅基地

文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式，UML2功能更强大，但是两者生成过程差别不大1.建立Test工程，如下图，uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图

Flume自定义拦截器-程序员宅基地

文章浏览阅读174次。需求：一个topic包含很多个表信息，需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project，只有data和name。因为担心data里面会空值，所以根同事商量，让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区，proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka

java同时输入不同类型数据,Java Spring中同时访问多种不同数据库-程序员宅基地

文章浏览阅读380次。原标题：Java Spring中同时访问多种不同数据库多样的工作要求，可以使用不同的工作方法，只要能获得结果，就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题，有时是必须把数据归档到某种数据仓库中，有时是要把数据变更推送到第三方数据库中。使用Spring框架时，使用单一数据库是非常容易的，但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库