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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/829302.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 异步编程模型(APM)的深入理解

在现代软件开发中&#xff0c;异步编程已经成为了一种不可或缺的技能。特别是在需要处理I/O密集型任务或长时间运行的操作时&#xff0c;异步编程能够显著提高应用程序的性能和用户体验。C# 作为一种流行的编程语言&#xff0c;提供了多种异步编程模型&#xff0c;其中最经典的…

2024新版大学计算机基础教程47集全(组成原理+网络+操作系统)

不上学不上班&#xff0c;走&#xff0c;去上香&#xff01; 不抽烟不喝酒&#xff0c;走&#xff0c;去抽奖&#xff01; 不买基金不买股票&#xff0c;走&#xff0c;去买彩票&#xff01; 知乎上我一路乞讨&#xff0c;大街上我狂翻垃圾&#xff01; 后现代暴富主义&#xf…

ORACLE 中varchar2类型的日期数字,例如20230814,转为2023-08-14

ORACLE 中varchar2类型的日期数字&#xff0c;例如20230814&#xff0c;转为2023-08-14 引言场景一&#xff1a;简单格式转换场景二&#xff1a;更新字段为日期类型场景三&#xff1a;在WHERE子句中处理varchar日期场景四&#xff1a;联合其他日期操作总结 引言 在Oracle数据库…

Linux下基本指令-掌握

目录 为什么要学命令行 Linux下基本指令-掌握 ls 指令 pwd命令 cd 指令 touch指令 mkdir指令&#xff08;重要&#xff09;&#xff1a; rmdir指令 && rm 指令&#xff08;重要&#xff09;&#xff1a; man指令&#xff08;重要&#xff09;&#xff1a; cp指…

网盘——进入文件夹

本文主要讲解网盘的文件操作中进入文件夹的部分&#xff0c;具体实现步骤如下&#xff1a; 1、具体步骤如下&#xff1a; A、客户端发送进入文件夹的请求&#xff08;该请求包含目录信息以及要进入的文件夹名字&#xff09; B、服务器收到该请求之后&#xff0c;服务器首先判…

STL-string类的使用及其模拟实现

string类的使用 string 类是 C 标准库提供的用于处理字符串的类&#xff0c;它相比 C 语言中的字符串处理函数更为高级、灵活和安全。 string 类提供了丰富的成员函数和操作符&#xff0c;用于处理字符串的拼接、查找、替换、截取、插入等操作。string 类自动处理字符串的内存分…

Linux:强制用户访问加密(强制让用户使用https访问)

Linux&#xff1a;强制用户访问加密&#xff08;强制让用户使用https访问&#xff09; [rootserver100 ~]# vim /etc/nginx/conf.d/vhosts.conf# 修改扩展配置文件如下#下面是对访问http进行重写&#xff0c;自动导向到https server{listen 80;server_name login.timinglee.o…

Leetcode哈希表刷题(一)

给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&#xff1a; 输入&#xff…

MySQL双层游标嵌套循环方法

文章目录 1、需求描述2、思路3、创建存储过程 1、需求描述 1、在项目中&#xff0c;需要将A表中主键id&#xff0c;逐个取出&#xff0c;作为条件&#xff0c;在B表中去逐一查询&#xff0c;将B表查询到的结果集&#xff08;A表B表关系&#xff1a;一对多&#xff09;&#xf…

在CentOS7中wget命令显示not found怎么解决

实验需要&#xff0c;在本机上安装了一个CentOS7虚拟机&#xff0c;运行wget命令时显示not found。按照网上的教程&#xff0c;使用命令sudo yum install wget&#xff0c;依然失败。 怎么回事呢&#xff1f;会不会是网络的原因呢&#xff1f;想到这&#xff0c;ping了一下www…

达梦(DM) SQL日期操作及分析函数

达梦DM SQL日期操作及分析函数 日期操作SYSDATEEXTRACT判断一年是否为闰年周的计算确定某月内第一个和最后一个周末某天的日期确定指定年份季度的开始日期和结束日期补充范围内丢失的值按照给定的时间单位查找使用日期的特殊部分比较记录 范围处理分析函数定位连续值的范围查找…

DNA序列k-mers哈希映射和相似序列查找

对DNA序列的k-mer进行哈希映射和相似序列查找是生物信息学中常见的任务之一。使用哈希函数对DNA序列的k-mer进行映射&#xff0c;并使用哈希表进行相似序列的查找。这种方法可以加速相似序列的搜索&#xff0c;并在处理大规模DNA序列数据时具有较好的性能。 哈希函数是一种将输…

C++系列-输入输出

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” C输入和输出 我们都知道C语言的输出是用printf函数来实现的&#xff0c;那么C呢&#xff0c;它的实现逻辑是什么呢&#xff0c;让我们一起来看一下&#xff0c; #include<i…

docker入门级命令

基本概念 docker的连个基本概念&#xff1a;镜像、容器。 docker镜像可以理解为是存储docker安装包的地方&#xff0c;比如&#xff1a;mcr.microsoft.com/mssql/server:2017-latest是sqlserver的docker镜像。 可以通过docker pull命令拉取远程镜像到本地。比如&#xff1a;…

K8S 调试运行中报错的 Pod

开始调试有问题的 Pod 准备环境 创建一个例子用于测试&#xff1a; apiVersion: apps/v1 kind: Deployment metadata:name: nginx-deploymentnamespace: apps spec:selector:matchLabels:app: nginxreplicas: 2template:metadata:labels:app: nginxspec:containers:- name: …

Linux系统安全及应用(1)

目录 一.账号安全控制 系统账号清理 二.密码安全控制 密码安全控制 三.命令历史限制 命令历史限制 四.限制su切换用户 1&#xff09;将信任的用户加入到wheel组中 2&#xff09;修改su的PAM认证配置文件 ​编辑五.PAM认证的构成 六.使用sudo机制提升权限…

android 上传视频

1.在页面按钮或图标控件中添加点击事件&#xff0c;并调用选择文件动作 //点击图片选择视频按钮事件public void uploadvideo(View view){Intent intent new Intent(Intent.ACTION_GET_CONTENT); // 选择文件动作intent.setType("video/*"); …

python数据分析与可视化

Python数据分析与可视化是数据科学领域的重要技能&#xff0c;它涉及到使用Python语言及其丰富的库来分析数据、提取信息、并将其转换为易于理解的图表和图形。以下是Python数据分析与可视化的一些关键点&#xff1a; ### 1. 数据分析库 - **Pandas**&#xff1a;用于数据处理…

IDEA离线安装插件

1、下载地址 https://plugins.jetbrains.com/idea 如果去其他编辑器&#xff0c;点击下拉&#xff0c;选择即可。 2.搜索 在输入框输入关键词&#xff0c;按照提示选择即可&#xff0c;点击搜索按钮&#xff0c;查看结果。 3、选择版本 按照自己的版本选择合适的版本 4、安…

8086:qemu执行汇编

正文 环境&#xff1a;macOS M1。 QEMU&#xff08;Quick EMUlator&#xff09;是一个开源的虚拟机监视器&#xff0c;可以模拟多种硬件平台&#xff0c;包括处理器架构、设备和操作系统。QEMU具有以下主要功能和用途&#xff1a; 硬件模拟器&#xff1a;QEMU可以模拟多种处理…