HTTP的场景实践｜青训营使用缓存是前端性能优化的重要方式，既可以提高响应的速度又可以减少不必要的重复请求，从而提高服

简介

使用缓存是前端性能优化的重要方式，既可以提高响应的速度又可以减少不必要的重复请求，从而提高服务器的吞吐量。但是有时候缓存并不适用于所有情况，有时候反而会使用户体验变差，因此需要根据不同的请求制定不同的缓存策略。浏览器缓存就是浏览器把一个已经请求过的Web资源拷贝一份副本储存在本地磁盘中。当再次访问相同的URL时，浏览器会根据缓存机制决定是直接使用副本响应访问请求，还是向服务器再次发送请求。在Web开发中，HTTP的缓存策略是一项重要的技术，它能够显著减少网络请求和提高网页加载速度。本文选择一个浏览器，并对其涉及的请求中的缓存策略进行具体分析，以帮助开发人员更好地理解和使用HTTP缓存策略的优势。

我将以谷歌（Chrome）浏览器为例对于其涉及的请求中的缓存策略展开具体分析。

缓存策略的分类

HTTP协议的缓存策略分两种：强制缓存和协商缓存，而强制缓存优先级大于协商缓存。

强制缓存：服务器告诉浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
协商缓存：让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的Etag和Last-Modified
通过请求发送给服务器，由服务器校验。如果文件没有改变，那么直接返回304状态，继续使用浏览器缓存。

HTTP缓存都是从第二次请求开始的：

第一次请求资源时，服务器返回资源，并在响应头首部中回传资源的缓存策略。
第二次请求时，浏览器判断这些请求参数，击中强缓存就直接返回状态码200，否则就把请求参数加到请求头首部中传给服务器，看是否击中协商缓存，击中则返回304，否则服务器会返回新的资源。

实践分析

为了验证Chrome浏览器的缓存策略，我们通过Node.js创建一个简单的HTTP服务器，并在响应中添加相应的缓存头字段。然后使用Chrome开发一个页面，在页面中加载一些静态资源，并通过开发者工具的Network面板来观察请求和缓存情况。

首先，我们使用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');
});

编写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>

编写CSS样式表

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

body {
  background-color: lightgray;
}

h1 {
  color: red;
}

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

启动服务器

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

观察缓存情况

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

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

结论

Google Chrome采用了强缓存和协商缓存策略，这些策略同时减少了网络请求和提高了网页加载速度，为用户提供更好的浏览体验。对于开发人员来说，理解和合理应用这些缓存策略，能够优化网站的性能，并降低服务器的负载压力，是非常有价值的技术实践。

HTTP的场景实践｜ 青训营

简介

缓存策略的分类

实践分析

结论

HTTP的场景实践｜青训营