HTTP缓存策略实践和|青训营

不染风

2024-04-22 帮助1人

摘要：HTTP缓存是提升Web性能的关键技术之一。本文以谷歌Chrome浏览器为例，深入探讨了其涉及的请求中的缓存策略，并通过实际代码示例进行验证和分析。通过学习与理解缓存策略的实践，开发者可以有效地减少网络请求，提供更快速、可靠的用户体验。

1. 引言

随着Web应用的日益复杂和用户对性能的不断追求，优化网络请求成为了开发者们的重要任务。HTTP缓存技术通过将已经获取的数据保存在客户端，以便于再次使用，从而减少对服务器的后续请求。本文将以Chrome浏览器为例，深入研究其缓存策略并进行实践与分析。

2. 响应头字段

HTTP缓存策略主要通过响应头字段来进行配置和控制。常见的响应头字段包括：

Cache-Control：用于定义缓存的行为和期限。
Expires：指定响应的过期时间。
Etag：用于识别资源内容的唯一标识符。
Last-Modified：指示资源的最后修改时间。
Pragma：旧版本HTTP协议中用于定义缓存行为的字段。

3. 缓存策略分类

根据缓存的位置和生命周期，缓存策略可以分为四类：无缓存、强制缓存、协商缓存和来源验证。

3.1 无缓存

在无缓存的策略下，浏览器每次请求都会向服务器发送请求，并在获取到响应后立即更新缓存。实现的关键是使响应头中的缓存策略字段设置为no-store。

示例代码：

response.setHeader("Cache-Control", "no-store");

3.2 强制缓存

强制缓存是通过响应头中的Expires和Cache-Control字段来配置的，它告诉浏览器在一定时间内直接使用缓存而不发送请求到服务器。

示例代码：

response.setHeader("Cache-Control", "max-age=3600"); // 缓存时间为1小时
response.setHeader("Expires", new Date(Date.now()   3600000).toUTCString()); // 缓存时间为1小时

3.3 协商缓存

协商缓存是在强制缓存失效后，浏览器发送请求到服务器进行验证，判断缓存是否有效。关键的响应头字段是Etag和Last-Modified。服务器通过比较这些字段的值来判断资源是否变化。

示例代码：

// 首次请求时，服务器返回响应头中的Etag和Last-Modified字段
response.setHeader("Etag", "xxx");
response.setHeader("Last-Modified", "xxx");

// 比较上一次请求的Etag和Last-Modified与服务器返回的字段进行判断
request.setHeader("If-None-Match", savedEtag);
request.setHeader("If-Modified-Since", savedLastModified);

3.4 来源验证

来源验证用于确保资源只能在特定的来源页面中使用。关键的响应头字段是Access-Control-Allow-Origin，它定义了允许访问资源的页面来源。

示例代码：

response.setHeader("Access-Control-Allow-Origin", "https://example.com");

4. 实践与分析

为了验证Chrome浏览器的缓存策略，我们通过Node.js创建一个简单的HTTP服务器，并在响应中添加相应的缓存头字段。然后使用Chrome开

发一个页面，在页面中加载一些静态资源，并通过开发者工具的Network面板来观察请求和缓存情况。

4.1 创建HTTP服务器

首先，我们使用Node.js创建一个简单的HTTP服务器，监听在本地的某一个端口上。

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
  const { url } = req;
  
  if (url === '/') {
    // 返回HTML页面
    res.setHeader('Content-Type', 'text/html');
    res.end(fs.readFileSync('index.html'));
  } else if (url === '/styles.css') {
    // 返回CSS文件
    res.setHeader('Content-Type', 'text/css');
    res.setHeader('Cache-Control', 'max-age=3600');  // 设置缓存时间为1小时
    res.end(fs.readFileSync('styles.css'));
  } else if (url === '/image.jpg') {
    // 返回图片文件
    res.setHeader('Content-Type', 'image/jpeg');
    res.setHeader('Cache-Control', 'no-cache');  // 禁用缓存
    res.end(fs.readFileSync('image.jpg'));
  } else {
    res.statusCode = 404;
    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

4.2 编写HTML页面

在项目根目录下创建一个index.html文件，并在其中加载一些静态资源。

<!DOCTYPE html>
<html>
<head>
  <title>HTTP缓存策略实践与分析</title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <h1>HTTP缓存策略实践与分析</h1>
  <img src="/image.jpg" alt="Image">
</body>
</html>

4.3 编写CSS样式表

在项目根目录下创建一个styles.css文件，添加一些样式规则。

body {
  background-color: lightgray;
}

h1 {
  color: red;
}

img {
  width: 200px;
  height: auto;
}

4.4 启动服务器

在终端中运行node server.js启动服务器。

4.5 观察缓存情况

在Chrome浏览器中打开地址http://localhost:3000，同时打开开发者工具的Network面板。

第一次访问页面时，可以观察到所有资源的状态为200 OK，这是因为服务器端的缓存策略设置为无缓存，强制浏览器每次请求都从服务器获取最新资源。
刷新页面，可以观察到一部分资源的状态为304 Not Modified，表示这些资源与浏览器缓存的版本一致，浏览器通过协商缓存机制验证资源是否从服务器获取。
关闭浏览器再次访问页面，可以观察到所有资源的状态为200 OK，这是因为之前的缓存已经被清空，强制浏览器再次获取最新资源。

5. 结论

通过实践与分析，我们了解了Chrome浏览器在HTTP请求中的缓存策略。我们通过设置不同的响应头字段，实现了无缓存、强制缓存、协商缓存和来源验证等不同的缓存策略，通过开发者工具的Network面板观察了每种策略下的请求和缓存情况。

HTTP缓存策略的合理配置能够显著提升Web应用的性能和用户体验，减少带宽消耗和服务器负载。开发者应根据具体的业务需求和资源特性，选择合适的缓存策略来优化网络请求，提高应用性能。

参考文献：

MDN Web Docs, HTTP headers, developer.mozilla.org/en-US/docs/…
Google Developers, Caching best practices

这篇好文章是转载于：学新通技术网

HTTP缓存策略实践和|青训营

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐