Hi,我们又见面了,我是小鑫同学1024,今天带来了2021年技术梳理篇《HTTP缓存》

在Chrome调试模式关闭Network中的Disable cache

强缓存-HTTP1.0

访问本地缓存验证资源是否有效

状态码: 200

expires: 服务器响应请求的资源时在Response Headers中增加expires字段标明资源过期时间(格林尼治时间)

缺点: 服务器和客户端时间不同步造成影响

// 请求资源10秒内有效 key:Expires value:格林尼治时间
res.setHeader("Expires", new Date(Date.now() + 10 * 1000).toUTCString());

强缓存-HTTP1.1

访问本地缓存验证资源是否有效

有效单位(秒)

状态码: 200

cache-control: 服务器响应请求的资源时在Response Headers中增加cache-control字段标明资源缓存形式

示例: 资源缓存5秒有效

res.setHeader("Cache-Control", "max-age=5");

协商缓存: last-modified & if-modified-since: 基于时间

设置no-cache/no-store会忽略本地缓存,请求服务器验证资源是否有效

状态码: 304

示例: 资源缓存5秒有效

res.setHeader("Cache-Control", "no-cache");
res.setHeader("last-modified", new Date().toUTCString());
if (new Date(req.headers["if-modified-since"]).getTime() + 5 * 1000 > Date.now()) {
  res.statusCode = 304;
  res.end();
} else {
  res.statusCode = 200;
  res.end(content);
}

协商缓存: Etag & if-none-match: 基于内容摘要

设置no-cache/no-store会忽略本地缓存,请求服务器验证资源是否有效

状态码: 304

示例: 资源缓存5秒内容不修改有效

res.setHeader("Cache-Control", "no-cache");
const crypto = require("crypto");
const hash = crypto.createHash("sha1").update(content).digest("hex");
res.setHeader("Etag", hash);
  if (req.headers["if-none-match"] === hash) {
  res.statusCode = 304;
  res.end();
} else {
  res.statusCode = 200;
  res.end(content);
}

本篇内容到此就结束了,感谢你的阅读,我是小鑫同学1024,一个5年滴，Bug，来者不拒，断点打起来，3年Android开发，2年+Vue前端开发，混合App开发的程序员,如果文章对你有所帮助,希望可以动动你的小手[赞]、[666]、[来看我],我们下篇文章见[灵光一闪]~