http协商缓存和强缓存

2024-04-27 06:04
文章标签 http 缓存 协商

本文主要是介绍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协商缓存和强缓存的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/939685

相关文章

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

【Linux】应用层http协议

一、HTTP协议 1.1 简要介绍一下HTTP        我们在网络的应用层中可以自己定义协议,但是,已经有大佬定义了一些现成的,非常好用的应用层协议,供我们直接使用,HTTP(超文本传输协议)就是其中之一。        在互联网世界中,HTTP(超文本传输协议)是一个至关重要的协议,他定义了客户端(如浏览器)与服务器之间如何进行通信,以交换或者传输超文本(比如HTML文档)。

如何确定 Go 语言中 HTTP 连接池的最佳参数?

确定 Go 语言中 HTTP 连接池的最佳参数可以通过以下几种方式: 一、分析应用场景和需求 并发请求量: 确定应用程序在特定时间段内可能同时发起的 HTTP 请求数量。如果并发请求量很高,需要设置较大的连接池参数以满足需求。例如,对于一个高并发的 Web 服务,可能同时有数百个请求在处理,此时需要较大的连接池大小。可以通过压力测试工具模拟高并发场景,观察系统在不同并发请求下的性能表现,从而

Anaconda 中遇到CondaHTTPError: HTTP 404 NOT FOUND for url的问题及解决办法

最近在跑一个开源项目遇到了以下问题,查了很多资料都大(抄)同(来)小(抄)异(去)的,解决不了根本问题,费了很大的劲终于得以解决,记录如下: 1、问题及过程: (myenv) D:\Workspace\python\XXXXX>conda install python=3.6.13 Solving environment: done.....Proceed ([y]/n)? yDownloa

Redis中使用布隆过滤器解决缓存穿透问题

一、缓存穿透(失效)问题 缓存穿透是指查询一个一定不存在的数据,由于缓存中没有命中,会去数据库中查询,而数据库中也没有该数据,并且每次查询都不会命中缓存,从而每次请求都直接打到了数据库上,这会给数据库带来巨大压力。 二、布隆过滤器原理 布隆过滤器(Bloom Filter)是一种空间效率很高的随机数据结构,它利用多个不同的哈希函数将一个元素映射到一个位数组中的多个位置,并将这些位置的值置

构建高性能WEB之HTTP首部优化

0x00 前言 在讨论浏览器优化之前,首先我们先分析下从客户端发起一个HTTP请求到用户接收到响应之间,都发生了什么?知己知彼,才能百战不殆。这也是作为一个WEB开发者,为什么一定要深入学习TCP/IP等网络知识。 0x01 到底发生什么了? 当用户发起一个HTTP请求时,首先客户端将与服务端之间建立TCP连接,成功建立连接后,服务端将对请求进行处理,并对客户端做出响应,响应内容一般包括响应

防止缓存击穿、缓存穿透和缓存雪崩

使用Redis缓存防止缓存击穿、缓存穿透和缓存雪崩 在高并发系统中,缓存击穿、缓存穿透和缓存雪崩是三种常见的缓存问题。本文将介绍如何使用Redis、分布式锁和布隆过滤器有效解决这些问题,并且会通过Java代码详细说明实现的思路和原因。 1. 背景 缓存穿透:指的是大量请求缓存中不存在且数据库中也不存在的数据,导致大量请求直接打到数据库上,形成数据库压力。 缓存击穿:指的是某个热点数据在

PHP APC缓存函数使用教程

APC,全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”。它为我们提供了缓存和优化PHP的中间代码的框架。 APC的缓存分两部分:系统缓存和用户数据缓存。(Linux APC扩展安装) 系统缓存 它是指APC把PHP文件源码的编译结果缓存起来,然后在每次调用时先对比时间标记。如果未过期,则使用缓存的中间代码运行。默认缓存 3600s(一小时)。但是这样仍会浪费大量C

缓存策略使用总结

缓存是提高系统性能的最简单方法之一。相对而言,数据库(or NoSQL数据库)的速度比较慢,而速度却又是致胜的关键。 如果使用得当,缓存可以减少相应时间、减少数据库负载以及节省成本。本文罗列了几种缓存策略,选择正确的一种会有很大的不同。缓存策略取决于数据和数据访问模式。换句话说,数据是如何写和读的。例如: 系统是写多读少的吗?(例如基于时间的日志)数据是否是只写入一次并被读取多次?(例如用户配