🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
标题：📚 Cache缓存：HTTP缓存策略解析 📚
摘要：
本文将介绍HTTP缓存的重要性、缓存策略以及常见的缓存头信息，如Cache-Control、Expires、Last-Modified和Etag，帮助您了解如何利用缓存提高网站性能和用户体验。
引言：
🌐 在现代Web开发中，性能优化是提升用户体验的关键。HTTP缓存是一种优化网站性能的技术，它允许浏览器缓存静态资源，减少重复请求，从而提高加载速度和运行效率。接下来，让我们一起来探索HTTP缓存策略的奥秘。
正文：
1️⃣ Cache-Control
Cache-Control是HTTP缓存控制的首选头部信息，它允许服务器和客户端指定缓存策略。Cache-Control可以设置缓存的最大过期时间、是否允许缓存、是否需要重新验证等。常见的Cache-Control值包括public、private、no-cache、max-age等。
Cache-Control 是 HTTP 响应标头之一，用于控制缓存的行为。以下是一些使用 Cache-Control 的案例：
设置缓存过期时间：
在响应中设置
Cache-Control标头可以指定缓存过期时间。例如，以下代码设置缓存过期时间为 30 分钟：res.setHeader('Cache-Control', 'max-age=1800');设置缓存私有性：
通过设置
Cache-Control标头，可以控制缓存是否只对发送方有效，或者可以被任何缓存代理缓存。例如，以下代码设置缓存为私有缓存：res.setHeader('Cache-Control', 'private, max-age=1800');设置缓存公共性：
与设置缓存私有性相反，以下代码设置缓存为公共缓存，可以被任何缓存代理缓存：
res.setHeader('Cache-Control', 'public, max-age=1800');设置缓存协商：
通过设置
Cache-Control标头，可以控制缓存协商的行为。例如，以下代码设置缓存协商为“开”：res.setHeader('Cache-Control', 'must-revalidate');或者，以下代码设置缓存协商为“关”：
res.setHeader('Cache-Control', 'no-cache');设置多个缓存指令：
可以在一个
Cache-Control标头中设置多个缓存指令。例如，以下代码设置缓存过期时间为 30 分钟，并设置缓存为私有缓存：res.setHeader('Cache-Control', 'private, max-age=1800');
通过使用 Cache-Control 标头，可以有效地控制缓存的行为，从而提高网站性能和减少服务器负载。
2️⃣ Expires
Expires是HTTP缓存的早期头部信息，它指定了资源的过期时间。当资源过期后，浏览器会重新请求服务器获取最新版本。Expires的值是一个绝对时间戳，表示资源到指定时间点为止都是有效的。
Expires 是 HTTP 响应标头之一，用于指定缓存过期的日期和时间。以下是一些使用 Expires 的案例：
设置缓存过期时间：
在响应中设置
Expires标头可以指定缓存过期时间。例如，以下代码设置缓存过期时间为 2022 年 1 月 1 日的 00:00:00：res.setHeader('Expires', 'Wed, 01 Jan 2022 00:00:00 GMT');设置相对缓存过期时间：
除了设置绝对的过期时间，
Expires标头也可以设置相对时间。例如，以下代码设置缓存过期时间为 30 分钟：res.setHeader('Expires', '+1800 seconds');
使用 Expires 标头可以有效地控制缓存的行为，告诉客户端缓存应该在哪个时间点之后进行更新。这样可以减少网络请求，提高网站性能。
但是，由于服务器和客户端之间的时间同步问题，以及代理服务器可能修改或删除 Expires 标头，Expires 标头已经逐渐被 Cache-Control 标头取代，作为缓存控制的推荐方法。
3️⃣ Last-Modified
Last-Modified是HTTP缓存的另一个头部信息，它指定了资源的最后修改时间。当浏览器请求资源时，会携带Last-Modified的值，服务器会根据这个值判断资源是否已经更新。如果资源未更新，服务器会返回304 Not Modified状态码，浏览器使用缓存资源。
Last-Modified 是 HTTP 响应标头之一，用于指定资源最后一次修改的日期和时间。以下是一些使用 Last-Modified 的案例：
设置
Last-Modified标头：在响应中设置
Last-Modified标头可以告知客户端资源最后一次修改的时间。例如，以下代码设置Last-Modified标头为 2022 年 1 月 1 日的 00:00:00：res.setHeader('Last-Modified', 'Wed, 01 Jan 2022 00:00:00 GMT');获取
Last-Modified标头：在请求中，可以通过
req.headers['last-modified']获取Last-Modified标头的值。例如，以下代码获取Last-Modified标头并将其存储在lastModified变量中：const lastModified = req.headers['last-modified'];
使用 Last-Modified 标头可以实现缓存控制，通过比较服务器端和客户端资源最后一次修改的时间，可以决定是否需要重新获取资源。但是，由于服务器和客户端之间的时间同步问题，Last-Modified 标头已经逐渐被 ETag 标头取代，作为缓存控制的推荐方法。
4️⃣ Etag
Etag是HTTP缓存的另一种头部信息，它是一个唯一标识资源的哈希值。当浏览器请求资源时，会携带Etag的值，服务器会根据这个值判断资源是否已经更新。如果资源未更新，服务器会返回304 Not Modified状态码，浏览器使用缓存资源。
ETag 是 HTTP 响应标头之一，用于提供资源的一致性校验。以下是一些使用 ETag 的案例：
设置
ETag标头：在响应中设置
ETag标头可以提供资源的唯一标识符。例如，以下代码设置ETag标头为一个字符串：res.setHeader('ETag', '"1234567890abcdef"');获取
ETag标头：在请求中，可以通过
req.headers['etag']获取ETag标头的值。例如，以下代码获取ETag标头并将其存储在etag变量中：const etag = req.headers['etag'];
使用 ETag 标头可以实现缓存控制，通过比较服务器端和客户端资源的一致性，可以决定是否需要重新获取资源。ETag 标头比 Last-Modified 标头更可靠，因为其不会受到服务器和客户端之间的时间同步问题影响。
以下是一个简单的缓存控制示例，使用 ETag 和 If-None-Match 标头：
const express = require('express');
const app = express();
app.get('/resource', (req, res) => {
const etag = '"1234567890abcdef"';
if (req.headers['if-none-match'] === etag) {
res.status(304).end(); // Not Modified
} else {
res.setHeader('etag', etag);
res.send('This is the resource.');
}
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
在上述示例中，如果客户端发送的 If-None-Match 标头与服务器端设置的 ETag 标头相匹配，那么服务器将返回 304 Not Modified 状态码，表示资源未修改，客户端可以继续使用缓存的资源。如果不匹配，服务器将返回新的 ETag 标头和资源内容。
总结：
🎉 HTTP缓存是一种优化网站性能的重要技术，它允许浏览器缓存静态资源，减少重复请求，从而提高加载速度和运行效率。通过了解Cache-Control、Expires、Last-Modified和Etag等缓存头信息，我们可以更好地利用缓存提高网站性能和用户体验。
