JavaScript 前端性能优化之 HTTP 缓存：强缓存与协商缓存配置
在 Web 开发中，性能优化是一个永恒的话题。HTTP 缓存是性能优化的关键组成部分，它能够显著减少服务器的负载，提高页面加载速度，提升用户体验。本文将围绕 JavaScript 语言的前端性能优化，重点探讨 HTTP 缓存的两种主要策略：强缓存和协商缓存，并介绍如何在配置中实现它们。
强缓存
什么是强缓存？
强缓存是指当浏览器请求资源时，如果该资源在本地有缓存，并且缓存未过期，则直接从本地缓存中读取资源，而不需要再次向服务器发送请求。这种缓存策略可以大大减少网络请求，提高页面加载速度。
强缓存配置
在 HTTP/1.1 协议中，强缓存主要通过以下两个响应头实现：
- `Expires`：表示资源过期时间，格式为 `Date`。
- `Cache-Control`：表示缓存策略，常用的值有 `max-age`、`no-cache`、`no-store` 等。
以下是一个简单的示例：
javascript
// 服务器端代码示例（Node.js）
app.get('/some-resource', (req, res) => {
res.setHeader('Cache-Control', 'max-age=3600'); // 缓存1小时
res.sendFile(__dirname + '/some-resource');
});
在这个例子中，我们设置了 `Cache-Control` 的 `max-age` 为 3600 秒，即 1 小时。这意味着在 1 小时内，浏览器会从本地缓存中读取资源，而不会再次向服务器发送请求。
强缓存注意事项
- `Expires` 和 `Cache-Control` 同时存在时，`Cache-Control` 优先级更高。
- `max-age` 的值应该根据资源的变化频率来设置，避免缓存过时。
- 对于动态内容，可以使用 `no-cache` 或 `must-revalidate` 策略，让浏览器在每次请求时与服务器协商缓存。
协商缓存
什么是协商缓存？
协商缓存是指当浏览器请求资源时，如果本地缓存存在，但缓存已过期，则浏览器会向服务器发送一个带有 `If-None-Match` 或 `If-Modified-Since` 头部的请求，询问服务器资源是否发生变化。如果资源未变化，服务器会返回 `304 Not Modified` 响应，浏览器则从本地缓存中读取资源；如果资源已变化，则返回新的资源。
协商缓存配置
协商缓存主要通过以下两个响应头实现：
- `ETag`：资源唯一标识符，用于比较资源是否发生变化。
- `Last-Modified`：资源的最后修改时间，用于比较资源是否发生变化。
以下是一个简单的示例：
javascript
// 服务器端代码示例（Node.js）
app.get('/some-resource', (req, res) => {
const etag = '1234567890';
const lastModified = new Date().toUTCString();
if (req.headers['if-none-match'] === etag || req.headers['if-modified-since'] === lastModified) {
res.status(304).end();
} else {
res.setHeader('ETag', etag);
res.setHeader('Last-Modified', lastModified);
res.sendFile(__dirname + '/some-resource');
}
});
在这个例子中，我们首先检查请求头中的 `If-None-Match` 和 `If-Modified-Since`，如果与本地缓存一致，则返回 `304 Not Modified`；否则，返回新的资源，并设置 `ETag` 和 `Last-Modified`。
协商缓存注意事项
- `ETag` 和 `Last-Modified` 的值应该根据资源的变化来设置，避免缓存不一致。
- 对于频繁变动的资源，可以使用 `ETag`；对于不常变动的资源，可以使用 `Last-Modified`。
- 在使用协商缓存时，需要注意资源的版本控制，避免缓存不一致。
总结
HTTP 缓存是前端性能优化的重要手段，通过合理配置强缓存和协商缓存，可以显著提高页面加载速度，降低服务器负载。在实际开发中，我们需要根据资源的特点和变化频率，选择合适的缓存策略，以达到最佳的性能优化效果。
代码示例
以下是一个简单的 Node.js 服务器示例，实现了强缓存和协商缓存的配置：
javascript
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
const filePath = path.join(__dirname, req.url);
const fileStat = fs.statSync(filePath);
if (fileStat.isFile()) {
const etag = '1234567890';
const lastModified = new Date(fileStat.mtime).toUTCString();
if (req.headers['if-none-match'] === etag || req.headers['if-modified-since'] === lastModified) {
res.writeHead(304);
res.end();
} else {
res.writeHead(200, {
'Content-Type': 'text/plain',
'Cache-Control': 'max-age=3600',
'ETag': etag,
'Last-Modified': lastModified
});
fs.createReadStream(filePath).pipe(res);
}
} else {
res.writeHead(404);
res.end();
}
});
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
在这个示例中，我们创建了一个简单的 HTTP 服务器，实现了强缓存和协商缓存的配置。当请求静态资源时，服务器会根据缓存策略返回相应的响应。
Comments NOTHING