前端缓存知识-强缓存与协商缓存

缓存的作用

减少了冗余的数据传输，节省了网费。
减少了服务器的负担，大大提高了网站的性能
加快了客户端加载网页的速度

缓存分类

强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互
两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则

强缓存

强制缓存，在缓存数据未失效的情况下，可以直接使用缓存数据。

在没有缓存数据的时候，浏览器向服务器请求数据时，服务器会将数据和缓存规则一并返回，缓存规则信息包含在响应 header 中，浏览器就是通过 header 中的缓存信息判断强缓存是否失效

对比缓存（协商缓存）

浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。
再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回 304 状态码，通知客户端比较成功，可以使用缓存数据。

请求流程

首次请求

二次请求

通过最后修改时间来判断缓存是否可用

Last-Modified：响应时告诉客户端此资源的最后修改时间
If-Modified-Since：当资源过期时（使用 Cache-Control 标识的 max-age），发现资源具有 Last-Modified 声明，则再次向服务器请求时带上头 If-Modified-Since。
服务器收到请求后发现有头 If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应最新的资源内容并返回 200 状态码；
若最后修改时间和 If-Modified-Since 一样，说明资源没有修改，则响应 304 表示未更新，告知浏览器继续使用所保存的缓存文件。

代码示例

创建一个 cache.js 文件，在其下添加一个 index.html 文件，运行 cache.js，打开 http://localhost:8000/index.html 测试

let http = require('http');
let fs = require('fs');
let path = require('path');
let mime = require('mime');
http.createServer(function (req, res) {
  let file = path.join(__dirname, req.url);
  fs.stat(file, (err, stat) => {
    if (err) {
      sendError(err, req, res, file, stat);
    } else {
      let ifModifiedSince = req.headers['if-modified-since'];
      if (ifModifiedSince) {
        if (ifModifiedSince == stat.ctime.toGMTString()) {
          res.writeHead(304);
          res.end();
        } else {
          send(req, res, file, stat);
        }
      } else {
        send(req, res, file, stat);
      }
    }
  });
}).listen(8080);

function send (req, res, file, stat) {
  res.setHeader('Last-Modified', stat.ctime.toGMTString());
  res.writeHead(200, { 'Content-Type': mime.getType(file) });
  fs.createReadStream(file).pipe(res);
}

function sendError (err, req, res, file, stat) {
  res.writeHead(400, { "Content-Type": 'text/html' });
  res.end(err ? err.toString() : "Not Found");
}

首次访问：可以发现状态码为 200，且响应头中有 Last-Modified: Wed, 15 Feb 2023 06:28:32 GMT

二次访问，状态码为 204，然后请求头中有 If-Modified-Since: Wed, 15 Feb 2023 06:28:32 GMT

经过对比可以发现二次访问的 If-Modified-Since 和首次访问的 Last-Modified 时间一致，所以二次访问将从缓存中取此文件

存在的问题

某些服务器不能精确得到文件的最后修改时间，这样就无法通过最后修改时间来判断文件是否更新了。
某些文件的修改非常频繁，在秒以下的时间内进行修改. Last-Modified 只能精确到秒。
一些文件的最后修改时间改变了，但是内容并未改变。我们不希望客户端认为这个文件修改了。
如果同样的一个文件位于多个 CDN 服务器上的时候内容虽然一样，修改时间不一样。

通过 ETag 来判断缓存是否可用

ETag 是实体标签的缩写，根据实体内容生成的一段 hash 字符串,可以标识资源的状态。当资源发生改变时，ETag 也随之发生变化。 ETag 是 Web 服务端产生的，然后发给浏览器客户端。

客户端想判断缓存是否可用可以先获取缓存中文档的 ETag，然后通过 If-None-Match 发送请求给 Web 服务器询问此缓存是否可用。
服务器收到请求，将服务器的中此文件的 ETag,跟请求头中的 If-None-Match 相比较,如果值是一样的,说明缓存还是最新的,Web 服务器将发送 304 Not Modified 响应码给客户端表示缓存未修改过，可以使用。
如果不一样则 Web 服务器将发送该文档的最新版本给浏览器客户端

代码示例

let http = require('http');
let fs = require('fs');
let path = require('path');
let mime = require('mime');
let crypto = require('crypto');
http.createServer(function (req, res) {
  let file = path.join(__dirname, req.url);
  fs.stat(file, (err, stat) => {
    if (err) {
      sendError(err, req, res, file, stat);
    } else {
      let ifNoneMatch = req.headers['if-none-match'];
      let etag = crypto.createHash('sha1').update(stat.ctime.toGMTString() + stat.size).digest('hex');
      if (ifNoneMatch) {
        if (ifNoneMatch == etag) {
          res.writeHead(304);
          res.end();
        } else {
          send(req, res, file, etag);
        }
      } else {
        send(req, res, file, etag);
      }
    }
  });
}).listen(8080);

function send (req, res, file, etag) {
  res.setHeader('ETag', etag);
  res.writeHead(200, { 'Content-Type': mime.lookup(file) });
  fs.createReadStream(file).pipe(res);
}

function sendError (err, req, res, file, etag) {
  res.writeHead(400, { "Content-Type": 'text/html' });
  res.end(err ? err.toString() : "Not Found");
}

如何直接不发请求，强缓存

浏览器会将文件缓存到 Cache 目录，第二次请求时浏览器会先检查 Cache 目录下是否含有该文件，如果有，并且还没到 Expires 设置的时间，即文件还没有过期，那么此时浏览器将直接从 Cache 目录中读取文件，而不再发送请求
Expires 是服务器响应消息头字段，在响应 http 请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求,这是 HTTP1.0 的内容，现在浏览器均默认使用 HTTP1.1,所以基本可以忽略
Cache-Control 与 Expires 的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据,如果同时设置的话，其优先级高于 Expires

Cache-Control

private：客户端可以缓存
public：客户端和代理服务器都可以缓存
max-age=60：缓存内容将在 60 秒后失效
no-cache：需要使用对比缓存验证数据,强制向源服务器再次验证
no-store：所有内容都不会缓存，强制缓存和对比缓存都不会触发

代码示例

html 中引入了 test.css 文件，同时服务端设置了 max-age=10 表示在 10 秒内取的都是缓存文件不用像服务端发请求

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
	hello3
</body>
</html>

let http = require('http');
let fs = require('fs');
let path = require('path');
let mime = require('mime');
http.createServer(function (req, res) {
  let file = path.join(__dirname, req.url);
  console.log(file);
  
  fs.stat(file, (err, stat) => {
    if (err) {
      sendError(err, req, res, file, stat);
    } else {
      send(req, res, file);
    }
  });
}).listen(8000);

function send (req, res, file) {
  let expires = new Date(Date.now() + 60 * 1000);
  res.setHeader('Expires', expires.toUTCString());
  res.setHeader('Cache-Control', 'max-age=10');
  fs.createReadStream(file).pipe(res);
}

function sendError (err, req, res, file, etag) {
  res.writeHead(400, { "Content-Type": 'text/html' });
  res.end(err ? err.toString() : "Not Found");
}

Cache-Control 的 private 与 public

模拟下面一种情况，客户端请求一个资源需要走代理服务器，代理服务器再去目标服务器取此资源

如果设置 Cache-Control 为 public 则客户端和代理服务器都会有缓存，当另一个客户端去获取资源时，如果代理服务器有缓存，则不需要从目标服务器再获取一次
如果设置 Cache-Control 为 private，那么缓存只在当前客户端生效，当另一个客户端去获取资源时，代理服务器依旧要再去目标服务器去获取资源