浏览器缓存机制

强制缓存：Cache-Control

用户首次请求服务器，如果服务器端设置了响应头Cache-Control，如：

ctx.set("Cache-Control","max-age=60*60*24");
//表示让浏览器缓存本次请求的静态文件，24小时内有效

下次再请求这个静态文件时，不必请求服务器，直接从浏览器的缓存中获取该静态文件。

 

对比缓存：Etag/If-None-Match 或 Last-Modified/If-Modified-Since 

当强制缓存（Cache-Control）失效，或者没有设置强制缓存时。对比缓存就发生作用了：

首次请求服务器，对比缓存和强制缓存是一起设置的，

• 设置响应头Etag=文件唯一标识

//文件信息对象
const stat = fs.statSync('./a.js');

//获取该静态文件的唯一标识，如果该文件修改，标识会改变
const etag = stat.mtime.getTime().toString(16); 

//设置响应头Etag
ctx.set('Etag',etag);  
//浏览器端的请求头If-None-Match会自动等于响应头Etag的值

• 设置响应头Last-Modified=文件的最近修改时间

//获取文件信息对象
const stat = fs.statSync('./a.js');

//获取文件最近一次修改的UTC时间(世界标准时间)
const lm = stat.mtime.toUTCString();  

//设置响应头Last-Modified
ctx.set('Last-Modified',lm);
//浏览器端的请求头If-Modified-Since会自动等于响应头Last-Modified的值

浏览器如何使用对比缓存？

当没有强制缓存时，浏览器发送请求到服务器，服务器需做以下判断：

const stat = fs.statSync('./a.js');

const inm = ctx.get("If-None-Match");  //获取请求头If-None-Match的值
const etag = stat.mtime.getTime().toString(16);  //获取文件的唯一标识

const ims = ctx.get("If-Modified-Since");  //获取请求头If-Modified-Since的值
const lm = stat.mtime.toUTCString();  //获取文件的最近修改UTC时间

if(etag===inm && lm===ims){   //当请求头的值和文件的一致时，返回304状态码
    ctx.status = 304;
    ctx.res.end();       //当浏览器收到服务器响应的304状态码，会直接使用浏览器缓存中的文件
}else{
    //如果不一致，则重新设置对比缓存响应头
    ctx.set('Etag',etag);
    ctx.set('Last-Modified',lm);
    
    //并发送该静态文件到浏览器
}