内容：
1.缓存基本原理
2.node实现缓存
1.缓存基本原理
第一重要、缓存策略：
- cache-control：用于控制缓存，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private
- expires：失效时间
第二重要、缓存实现过程：
- 第一次Server->Client："Last-Modified: Sat, 02 Dec 2017 04:03:14 GMT" --> 服务端告诉客户端资源修改的时间
- 第二次Client->Server："If-Modified-Since: Sat, 02 Dec 2017 04:03:14 GMT" --> 浏览器告诉服务器自己缓存的资源的修改时间
- 第二次Server->Client：200 || 304 --> 服务器根据两者时间是否相同决定返回200(返回新资源)还是304(叫浏览器用自己缓存的资源)
注意：
- cookie不属于缓存！
- 关于localstorage：https://www.cnblogs.com/st-leslie/p/5617130.html
2.node实现缓存
源码：
const http=require('http');
const fs=require('fs');
const url=require('url');
// 连续两次访问: http://localhost:8080/1.html 第一次是200 第二次是304
http.createServer((req, res)=>{
let {pathname}=url.parse(req.url);
//获取文件日期
fs.stat(`www${pathname}`, (err, stat)=>{
if(err){
res.writeHeader(404);
res.write('Not Found');
res.end();
}else{
// 请求头中有if-modified-since -> 不是第一次请求，之前浏览器中缓存了该页面
if(req.headers['if-modified-since']){
let oDate=new Date(req.headers['if-modified-since']);
let time_client=Math.floor(oDate.getTime()/1000);
let time_server=Math.floor(stat.mtime.getTime()/1000);
if(time_server>time_client){ // 服务器的文件时间 > 客户端手里的版本
sendFileToClient();
}else{
res.writeHeader(304);
res.write('Not Modified');
res.end();
}
}
// 请求头中没有if-modified-since -> 第一次请求 -> 直接返回要的文件
else{
sendFileToClient();
}
// 直接返回文件
function sendFileToClient(){
//发送
let rs=fs.createReadStream(`www${pathname}`);
res.setHeader('Last-Modified', stat.mtime.toGMTString());
//输出
rs.pipe(res);
rs.on('error', function(err){
res.writeHeader(404);
res.write('Not Found');
res.end();
});
}
}
});
}).listen(8080);
原理：
- 服务端第一次向客户端发送资源时设置文件修改时间：setHeader('Last-Modified', stat.mtime.toGMTString())
- 之后客户端向浏览器请求时服务端检查请求头中是否有if-modified-since：
- 如果有if-modified-since就判断服务器时间是否大于浏览器时间(若大于说明服务端文件已经修改就将新修改的文件返回，否则就返回304浏览器会直接使用原先缓存的资源)
- 如果没有if-modified-since就直接返回文件并像最上面那样设置文件修改时间
另外还可以设置缓存：
// 具有缓存控制的服务器 --> 设置Cache-Control(no-cache)
const http=require('http');
const fs=require('fs');
const url=require('url'); // 连续两次访问: http://localhost:8080/1.html 第一次是200 第二次是304
http.createServer((req, res)=>{
let {pathname}=url.parse(req.url); //获取文件日期
fs.stat(`www${pathname}`, (err, stat)=>{
if(err){
res.writeHeader(404);
res.write('Not Found');
res.end();
}else{
// 请求头中有if-modified-since -> 不是第一次请求，之前浏览器中缓存了该页面
if(req.headers['if-modified-since']){
let oDate=new Date(req.headers['if-modified-since']);
let time_client=Math.floor(oDate.getTime()/1000);
let time_server=Math.floor(stat.mtime.getTime()/1000); if(time_server>time_client){ // 服务器的文件时间 > 客户端手里的版本
sendFileToClient();
}else{
res.writeHeader(304);
res.write('Not Modified');
res.end();
}
}
// 请求头中没有if-modified-since -> 第一次请求 -> 直接返回要的文件
else{
sendFileToClient();
} // 直接返回文件
function sendFileToClient(){
//发送
let rs=fs.createReadStream(`www${pathname}`); // 设置缓存
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Last-Modified', stat.mtime.toGMTString()); //输出
rs.pipe(res); rs.on('error', function(err){
res.writeHeader(404);
res.write('Not Found');
res.end();
});
}
}
});
}).listen(8080);