Cache缓存：HTTP缓存策略解析

news2024/11/22 0:36:51

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要：
- 引言：
- 正文：
- - 1️⃣ Cache-Control
  - 2️⃣ Expires
  - 3️⃣ Last-Modified
  - 4️⃣ Etag
- 总结：
- 参考资料：

标题：📚 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');
});