http协商缓存和强缓存

最新推荐文章于 2025-04-04 16:13:40 发布

孩子气呵呵特

最新推荐文章于 2025-04-04 16:13:40 发布

阅读量857

点赞数 4

文章标签： http 缓存前端

本文链接：https://blog.youkuaiyun.com/weixin_39755186/article/details/138225126

版权

强缓存

强缓存则不需要向服务器发送请求，而是从浏览器读取缓存内容（内存缓存｜硬盘缓存）

内存缓存：存储在浏览器内存中，一般刷新浏览器会从内存缓存中获取到缓存内容，优点速度快，缺点关闭浏览器缓存丢失
硬盘缓存：存储在计算机硬盘中，空间大，读取效率慢

强缓存案例（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