缓存策略：从HTTP缓存到浏览器缓存，以及CDN的应用，实现前端资源的高效加载。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，下面是一篇关于缓存策略的文章，以讲座的模式呈现，内容涵盖HTTP缓存、浏览器缓存以及CDN的应用，旨在实现前端资源的高效加载。

前端资源高效加载：缓存策略深度解析

大家好，今天我们来聊聊前端性能优化中至关重要的一环：缓存策略。缓存的目的很简单，就是避免重复请求，减少服务器压力，提升用户体验。我们将从HTTP缓存、浏览器缓存，到CDN的应用，逐步深入，并结合代码示例，帮助大家理解并应用这些策略。

一、HTTP缓存：与服务器的第一次握手

HTTP缓存是浏览器与服务器之间进行资源缓存的标准机制。它允许浏览器在本地存储服务器返回的资源，并在后续请求中直接使用这些资源，而无需再次向服务器发起请求。HTTP缓存主要通过HTTP响应头来实现，其中最关键的几个头是：Cache-Control、Expires、Etag和Last-Modified。

1. `Cache-Control`：缓存行为的指挥官

Cache-Control是HTTP/1.1引入的，相比于Expires，它更加强大和灵活。它允许服务器更精确地控制客户端的缓存行为。常用的Cache-Control指令包括：

public: 允许任何缓存（包括代理服务器）缓存资源。
private: 只允许终端用户的浏览器缓存资源，不允许代理服务器缓存。通常用于用户特定数据。
no-cache: 强制每次使用缓存资源前都必须向服务器验证资源是否有效。
no-store: 彻底禁止缓存，每次都必须从服务器获取资源。
max-age=<seconds>: 指定资源被缓存的最大时长（秒）。
s-maxage=<seconds>: 类似于max-age，但只适用于共享缓存（例如CDN）。
must-revalidate: 如果缓存过期，必须先向服务器验证资源是否有效才能使用。
immutable: 声明资源在max-age期间不会改变。这通常用于版本化的静态资源。

示例：

HTTP/1.1 200 OK
Content-Type: image/jpeg
Cache-Control: public, max-age=3600, immutable

这个例子告诉浏览器，这张图片可以被任何缓存缓存，有效期为3600秒（1小时），并且在此期间不会改变。

代码示例（Node.js Express）：

const express = require('express');
const app = express();

app.get('/image.jpg', (req, res) => {
  // 设置缓存头
  res.set('Cache-Control', 'public, max-age=3600, immutable');
  // 模拟返回图片
  res.sendFile('/path/to/your/image.jpg');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

2. `Expires`：过时的缓存指令

Expires是HTTP/1.0定义的，指定资源失效的绝对时间。由于客户端的时间可能与服务器时间不同步，因此Expires的可靠性不如Cache-Control。

示例：

HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Thu, 01 Dec 2023 16:00:00 GMT

这个例子告诉浏览器，这张图片在2023年12月1日16:00:00 GMT之前有效。

注意： 尽量使用Cache-Control代替Expires，因为Cache-Control更加灵活和可靠。如果同时存在Cache-Control和Expires，Cache-Control的优先级更高。

3. `Etag`：资源指纹

Etag是一个资源的唯一标识符，由服务器生成。浏览器在后续请求中会携带If-None-Match头，将之前的Etag值发送给服务器。服务器会比较If-None-Match和当前资源的Etag，如果相同，则返回304 Not Modified，告诉浏览器使用缓存；如果不同，则返回新的资源和新的Etag。

示例：

首次请求：

HTTP/1.1 200 OK
Content-Type: text/html
Etag: "6a590417-346c-5f803b65"

后续请求：

GET /index.html HTTP/1.1
If-None-Match: "6a590417-346c-5f803b65"

服务器响应（资源未修改）：

HTTP/1.1 304 Not Modified

服务器响应（资源已修改）：

HTTP/1.1 200 OK
Content-Type: text/html
Etag: "7b601528-346c-6021a4b2"

代码示例（Node.js Express）：

const express = require('express');
const crypto = require('crypto');
const fs = require('fs');
const app = express();

function generateEtag(filePath) {
  const fileContent = fs.readFileSync(filePath);
  const hash = crypto.createHash('md5').update(fileContent).digest('hex');
  return `"${hash}"`; // ETag 需要用双引号包裹
}

app.get('/index.html', (req, res) => {
  const filePath = '/path/to/your/index.html';
  const etag = generateEtag(filePath);

  res.set('ETag', etag);

  if (req.headers['if-none-match'] === etag) {
    res.status(304).end();
  } else {
    res.sendFile(filePath);
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

4. `Last-Modified`：最后的修改时间

Last-Modified表示资源最后一次修改的时间。浏览器在后续请求中会携带If-Modified-Since头，将之前的Last-Modified值发送给服务器。服务器会比较If-Modified-Since和当前资源的最后修改时间，如果相同，则返回304 Not Modified，告诉浏览器使用缓存；如果不同，则返回新的资源。

示例：

首次请求：

HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Tue, 29 Nov 2023 10:00:00 GMT

后续请求：

GET /index.html HTTP/1.1
If-Modified-Since: Tue, 29 Nov 2023 10:00:00 GMT

服务器响应（资源未修改）：

HTTP/1.1 304 Not Modified

服务器响应（资源已修改）：

HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Tue, 29 Nov 2023 11:00:00 GMT

注意： Last-Modified的精度较低，只能到秒级。如果资源在1秒内多次修改，Last-Modified无法区分。此外，如果服务器获取到的文件修改时间不准确，也会导致缓存失效。因此，建议优先使用Etag。

代码示例（Node.js Express）：

const express = require('express');
const fs = require('fs');
const app = express();

function getLastModified(filePath) {
  const stats = fs.statSync(filePath);
  return stats.mtime.toUTCString();
}

app.get('/index.html', (req, res) => {
  const filePath = '/path/to/your/index.html';
  const lastModified = getLastModified(filePath);

  res.set('Last-Modified', lastModified);

  if (req.headers['if-modified-since'] === lastModified) {
    res.status(304).end();
  } else {
    res.sendFile(filePath);
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

5. 缓存策略的选择

策略	优点	缺点	适用场景
`Cache-Control`	灵活，可精确控制缓存行为	需要服务器配置	所有资源，尤其是静态资源
`Expires`	简单易用	可靠性较低，受客户端时间影响	不推荐使用，优先使用`Cache-Control`
`Etag`	精度高，可以区分资源是否真正发生变化	需要服务器计算资源指纹，增加服务器负担	经常更新的资源，需要精确判断是否需要更新
`Last-Modified`	简单易用	精度较低，受服务器文件系统时间影响	不经常更新的资源，对缓存精度要求不高

最佳实践：

对于静态资源（例如图片、CSS、JavaScript），使用Cache-Control: public, max-age=<seconds>, immutable，并结合版本号管理，实现长期缓存。
对于动态资源，使用Cache-Control: no-cache或Cache-Control: must-revalidate，并结合Etag或Last-Modified进行验证。

二、浏览器缓存：你的本地资源库

浏览器缓存是指浏览器在本地磁盘上存储的资源副本。当浏览器发起请求时，它会首先检查本地缓存中是否存在该资源的副本。如果存在，则直接使用缓存副本，而无需向服务器发起请求。

浏览器缓存分为两种类型：

强缓存（Strong Cache）： 浏览器直接使用缓存副本，无需向服务器验证。通过Cache-Control和Expires实现。
协商缓存（Negotiated Cache）： 浏览器需要向服务器验证缓存副本是否有效。通过Etag和Last-Modified实现。

浏览器缓存的工作流程：

浏览器发起请求。
浏览器检查本地缓存，如果存在匹配的资源副本，则进行下一步。否则，直接向服务器发起请求。
强缓存检查： 检查资源副本的Cache-Control和Expires头。如果资源未过期，则直接使用缓存副本，返回200 OK (from cache)或200 OK (from disk cache)。
协商缓存检查： 如果资源已过期，或者Cache-Control设置为no-cache或must-revalidate，则浏览器会向服务器发起请求，携带If-None-Match或If-Modified-Since头。
服务器检查请求头，如果资源未修改，则返回304 Not Modified，告诉浏览器使用缓存副本。否则，返回新的资源和新的Cache-Control、Etag或Last-Modified头。
浏览器更新本地缓存，并使用新的资源。

浏览器缓存的类型：

Memory Cache： 存储在内存中的缓存。速度最快，但容量有限，且在浏览器关闭后会失效。
Disk Cache： 存储在磁盘上的缓存。速度较慢，但容量较大，且在浏览器关闭后仍然有效。
Service Worker Cache： 由Service Worker控制的缓存。可以实现离线访问和更精细的缓存控制。

三、CDN：加速你的全球访问

CDN（Content Delivery Network，内容分发网络）是一种分布式网络架构，它将内容缓存到全球各地的服务器节点上。当用户访问网站时，CDN会将用户请求重定向到离用户最近的服务器节点，从而加速资源加载，减少延迟。

CDN的工作原理：

用户发起请求。
CDN根据用户的地理位置，选择离用户最近的CDN节点。
如果CDN节点上存在缓存的资源，则直接返回给用户。
如果CDN节点上不存在缓存的资源，则CDN节点会向源服务器发起请求，获取资源，并缓存到本地。
CDN节点将资源返回给用户。

CDN的优势：

加速资源加载： 将资源缓存到离用户最近的节点，减少延迟。
减轻服务器压力： 将大部分请求分发到CDN节点，减轻源服务器的负载。
提高网站可用性： 当源服务器出现故障时，CDN仍然可以提供缓存的资源。
安全防护： CDN可以提供DDoS攻击防护、Web应用防火墙等安全服务。

CDN的配置：

选择CDN服务提供商： 例如阿里云CDN、腾讯云CDN、Cloudflare等。
配置域名： 将网站域名指向CDN提供的CNAME记录。
配置缓存策略： 设置CDN节点的缓存时间、缓存规则等。
上传资源： 将静态资源上传到源服务器，CDN会自动同步到各个节点。

CDN的缓存策略：

CDN的缓存策略通常与HTTP缓存策略相结合。CDN节点会根据HTTP响应头中的Cache-Control、Expires、Etag和Last-Modified来决定如何缓存资源。

最佳实践：

为静态资源设置较长的Cache-Control: max-age，并开启CDN缓存。
为动态资源设置Cache-Control: no-cache或Cache-Control: must-revalidate，并配置CDN回源策略。
使用CDN提供的缓存刷新功能，及时更新CDN节点上的缓存。

四、实战案例：优化你的网站

现在，我们通过一个实战案例，将上述缓存策略应用到实际项目中。假设我们有一个简单的网站，包含以下资源：

index.html：网站首页，包含HTML结构、CSS样式和JavaScript脚本。
style.css：网站样式表，包含CSS样式。
script.js：网站脚本，包含JavaScript代码。
logo.png：网站Logo图片。

优化步骤：

配置HTTP缓存头：

index.html：

Cache-Control: no-cache, must-revalidate
Etag: "..."

style.css：

Cache-Control: public, max-age=31536000, immutable

script.js：

Cache-Control: public, max-age=31536000, immutable

logo.png：

Cache-Control: public, max-age=31536000, immutable

使用版本号管理静态资源：

将style.css和script.js文件名改为style.v1.css和script.v1.js。当需要更新资源时，修改版本号，例如style.v2.css和script.v2.js，从而强制浏览器重新加载资源。
配置CDN：
- 将网站域名指向CDN提供的CNAME记录。
- 配置CDN缓存策略，为静态资源设置较长的缓存时间。
- 开启CDN压缩功能，压缩HTML、CSS和JavaScript文件。
使用Gzip压缩：

在服务器端启用Gzip压缩，压缩HTML、CSS和JavaScript文件，减小文件大小，提高传输速度。

优化效果：

通过以上优化，可以显著提高网站的加载速度，减少服务器压力，提升用户体验。

静态资源（CSS、JavaScript、图片）通过CDN加速，并长期缓存，减少重复请求。
动态资源（HTML）通过协商缓存，确保及时更新。
使用版本号管理静态资源，避免缓存污染。
使用Gzip压缩，减小文件大小。

五、最佳实践总结

合理设置Cache-Control： 根据资源类型和更新频率，选择合适的Cache-Control指令。
使用版本号管理静态资源： 避免缓存污染，强制浏览器重新加载资源。
配置CDN： 加速资源加载，减轻服务器压力。
使用Gzip压缩： 减小文件大小，提高传输速度。
监控缓存命中率： 监控CDN和浏览器缓存的命中率，及时调整缓存策略。

掌握HTTP缓存、浏览器缓存和CDN的应用，是前端性能优化的关键。希望今天的分享能帮助大家更好地理解和应用这些策略，打造更快、更稳定的网站。

通过上述的讲解，我们了解了从HTTP缓存到浏览器缓存，以及CDN的应用，这些都是实现前端资源高效加载的关键策略。掌握这些技巧，将有助于优化你的网站性能，提升用户体验。

前端资源高效加载：缓存策略深度解析

一、HTTP缓存：与服务器的第一次握手

1. Cache-Control：缓存行为的指挥官

2. Expires：过时的缓存指令

3. Etag：资源指纹

4. Last-Modified：最后的修改时间

5. 缓存策略的选择

二、浏览器缓存：你的本地资源库

三、CDN：加速你的全球访问

四、实战案例：优化你的网站

五、最佳实践总结

发表回复 取消回复

1. `Cache-Control`：缓存行为的指挥官

2. `Expires`：过时的缓存指令

3. `Etag`：资源指纹

4. `Last-Modified`：最后的修改时间

发表回复取消回复