http缓存：

Web 缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是原始服务器中提取这 个文档。

使用缓存主要有如下几个优点：

• 缓存减少了冗余的数据传输，节省了你的网络费用。
• 缓存缓解了网络瓶颈问题。不需要更多的带宽就能够更快的加载页面。
• 缓存降低了对原始服务器的要求。服务器可以更快地响应，避免过载的出现。
• 缓存降低了距离时延，因为从较远的地方加载页面会更慢一些。

缓存的处理步骤：

一个缓存从接收到请求到做出响应，大概可以分为如下7个步骤：

1. 接收——缓存从网络中读取抵达的请求报文。
2. 解析——缓存对报文进行解析，提取出URL和各种首部。
3. 查询——缓存查看是否有本地副本可用，如果没有，就获取一份副本（并将其保存在本地）。
4. 新鲜度检测——缓存查看已缓存副本是否足够新鲜，如果不是，就询问服务器是否有任何更新。
5. 创建响应——缓存会用新的首部和已缓存的主体来构建一条响应报文。
6. 发送——缓存通过网络将响应发回给客户端。
7. 日志——缓存可选地创建一个日志文件条目来描述这个事务。

Http缓存流程图:

状态码区别:

• 200 请求成功，服务器返回全新的数据
• 200 from memory cache / from disk cache 本地强缓存还在有效期，直接使用本地缓存
• 304 请求成功，走了协商缓存，服务器判定（Etag和Last-modified）没有过期，告知浏览器使用缓存

业务中的使用场景：

项目中，我们主要使用缓存来存储html、css、js、img等静态资源，一般不会去存储动态资源，因为对动态资源的缓存会对数据实时性造成影响

1、强制缓存

强缓存是当我们访问URL的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。

我们第一次进入页面，请求服务器，然后服务器进行应答，浏览器会根据response Header来判断是否对资源进行缓存，如果响应头中expires、pragma或者cache-control字段，代表这是强缓存，浏览器就会把资源缓存在memory cache 或 disk cache中。

第二次请求时，浏览器判断请求参数，如果符合强缓存条件就直接返回状态码200，从本地缓存中拿数据。否则把响应参数存在request header请求头中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器会返回全新资源。

Expires:

这是 http1.0 时的规范；它的值为一个绝对时间的GMT格式的时间字符串，如Mon, 10 Jun 2022 21: 31 :12 GMT，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源。

Expires过度依赖本地时间，如果本地与服务器时间不同步，就会出现资源无法被缓存或者资源永远被缓存的情况。所以，Expires字段几乎不被使用了

cache-control:

上面我们提到了Expires有个缺点，当客户端本地时间和服务器时间不一致时会产生误差，浏览器会直接向服务器请求新的资源，为了解决这个问题，在http1.1规范中，提出了cache-control字段，且这个字段优先级高于上面提到的Expires，值是相对时间。

在cache-control中有常见的几个响应属性值，它们分别是:

• max-age=100 缓存100秒后过期，资源缓存在本地
• s-maxage 覆盖 max-age，作用与max-age一样，但只用于代理服务器中缓存
• no-cache 不使用本地缓存。使用协商缓存，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
• no-store 所有内容都不会被缓存，既不使用强制缓存也不适用协商缓存，每次用户请求该资源，都会向服务器发送一个请求，服务器再返回资源
• public 可以被所有的用户缓存，包括客户端和代理服务器
• private 只能被客户端缓存，不允许CDN等中继缓存服务器对其缓存

2、协商缓存

上面提到的强缓存都是由本地浏览器在确定是否使用缓存，当浏览器没有命中强缓存时就会向浏览器发送请求，验证协商缓存是否命中，如果缓存命中则返回304状态码，否则返回新的资源数据。

协商缓存（也叫对比缓存）是由服务器来确定资源是否可用，这将涉及到两组字段成对出现的，在浏览器第一次发出请求时会带上字段（Last-Modified或者Etag），则后续请求则会带上对于的请求字段（if-modified-since或者if-none-Match），若响应头没有Last-Modified或者Etag，则请求头也不会有对应的字段

基于Last-Modified：

1. 首先需要在服务器端读出文件修改时间，
2. 将读出来的修改时间赋给响应头的last-modified字段。
3. 最后设置Cache-control:no-cache
4.  

const http = require('http');
const fs = require('fs');
http.createServer((req,res)=>{
if(req.url === 'test.png'){
const data = fs.readFileSync('./test.png');
const {mtime} = fs.statSync('./test.png');
const temp = req.headers['if-modified-since'];
if(temp === mtime.toUTCString()){
res.statusCode = 304;
res.end();
return;
}
res.setHeader('last-modified',mtime.toUTCString());
res.setHeader('Catch-Control','no=cache');
res.end(data);
}else{
res.end(fs.readFileSync('./test.html'));
}
})

基于ETag:

1. 第一次请求某资源的时候，服务端读取文件并计算出文件指纹，将文件指纹放在响应头的etag字段中跟资源一起返回给客户端。
2. 第二次请求某资源的时候，客户端自动从缓存中读取出上一次服务端返回的ETag也就是文件指纹。并赋给请求头的if-None-Match字段，让上一次的文件指纹跟随请求一起回到服务端。
3. 服务端拿到请求头中的is-None-Match字段值（也就是上一次的文件指纹），并再次读取目标资源并生成文件指纹，两个指纹做对比。如果两个文件指纹完全吻合，说明文件没有被改变，则直接返回304状态码和一个空的响应体并return。如果两个文件指纹不吻合，则说明文件被更改，那么将新的文件指纹重新存储到响应头的ETag中并返回给客户端

const http = require('http');
const fs = require('fs');
const etag = require('etag');
http.createServer((req,res)=>{
if(req.url === 'test.png'){
const data = fs.readFileSync('./test.png');
const etagContent = etag(data);
const noMatch = req.headers['if-none-match'];
if(noMatch === etagContent){
res.statusCode = 304;
res.end();
return;
}
res.setHeader('etag',etagContent);
res.setHeader('Catch-Control','no=cache');
res.end(data);
}else{
res.end(fs.readFileSync('./test.html'));
}
})

作者简介

毕清华：精选主力干将！

 

来源:微信公众号:58本地服务终端技术

出处
:https://mp.weixin.qq.com/s/-83N7RS1B6V_r5tcU2CyrA