浏览器发出一个请求,服务器解析出响应的结果返回给浏览器.
缓存是怎么工作的?
用户发起请求,浏览器检查本地是否存在缓存,如果第一次请求没有缓存,那就向服务器发起请求,服务器协商缓存的内容并且返回响应,接着返回缓存响应,再次请求时,会检查缓存是否失效,没有失效就使用本地缓存,如果本地缓存失效了,
缓存header
判断本地有没有失效的可以用
- 返回时间Expires/Cache-Control
Expires(比较老式):返回的是一个绝对时间,由于时区问题很少用
Cache-Control(常用):返回的是一个相对时间
- 修改时间Last-Modified/If-Modified_Since
Last-Modified:向服务器校验的时候拿到的结果,每次返回响应的时候会告诉Last-Modified时间
If-Modified_Since:浏览器第二次或者第三次发起请求时,会把上次的修改时间放在修改头的If-Modified_Since
- 服务器校验 If-None-Match /TRag
defaultConfig.js
module.exports={
root:process.cwd(),
hostname:'127.0.0.1',
port:9527,
compress:/\.(html|js|css|md)/,
cache:{
maxAge:600,
expire:true,
cacheControl:true,
lastModified:true,
etag:true
}
}
新建文件src/helper/cache.js
const {cache} = require('../config/defaultConfig')
// 更新一下响应,修改时间
function refreshRes(stats,res){
const {maxAge,expires,cacheControl,lastModified,etag} = cache;
if(expires){
res.setHeader('Expires',(new Date(Date.now() + maxAge *1000)).toUTCString())
}
if(cacheControl){
res.setHeader('Cache-Control',`public,max-age=${maxAge}`)
}
if(lastModified){
res.setHeader('Last-Modified',stats.mtime.toUTCString())
}
if(etag){
res.setHeader('ETag',`${stats.size} = ${stats.mtime}`);
}
}
module.exports = function isFresh(stats,req,res){
refreshRes(stats,res)
const lastModified = req.headers['if-modified-since']
const etag = req.headers['if-none-match']
if(!lastModified && !etag){
return false
}
if(lastModified && lastModified !==res.getHeader('Last-Modified')) {
return false
}
if(etag && etag !== res.getHeader('Etag')){
return false
}
return true
}
route.js引用ca'ch
const fs =require('fs')
const path = require('path')
const Handlebars = require('handlebars')
const promisify = require('util').promisify;
const stat = promisify(fs.stat)
const readdir = promisify(fs.readdir);
// //引用range范围
// const range = require('./range')
const config = require('../config/defaultConfig')
const tplPath = path.join(__dirname,'../template/dir.tpl')
const source = fs.readFileSync(tplPath);
const template = Handlebars.compile(source.toString())
//引入新加的mime,对contentType的判断
const mime = require('./mime')
const compress = require('./compress')
//引用range范围
const range = require('./range')
// 引入cache
const isFresh = require('./cache')
module.exports=async function(req,res,filePath){
try{
const stats =await stat(filePath)
if(stats.isFile()){
const contentType = mime(filePath)
res.statusCode = 200
res.setHeader('content-Type',contentType)
if(isFresh(stats,req,res)){
res.statusCode = 304;
res.end()
return
}
let rs;
const {code,start,end} = range(stats.size, req, res)
if(code === 200){
res.statusCode = 200
rs = fs.createReadStream(filePath)
}else{
res.statusCode = 216 //测试随便定
rs = fs.createReadStream(filePath,{start,end})
}
// let rs = fs.createReadStream(filePath)
if(filePath.match(config.compress)){
rs = compress(rs,req,res)
}
rs.pipe(res);
// fs.readFile(filePath,(err,data)=>{
// res.end(data)
// });
}else if(stats.isDirectory()){
//所有异步调用必须用await
const files =await readdir(filePath);
res.statusCode = 200
res.setHeader('content-Type','text/html')
const dir = path.relative(config.root,filePath)
const data = {
title:path.basename(filePath),
// dir:config.root,
dir:dir?`/${dir}`:'',
files:files.map(file=>{
return {
file,
icon:mime(file)
}
})
}
res.end(template(data));
}
}catch(ex){
console.error(ex);
res.statusCode = 404
res.setHeader('content-Type','text/plain')
res.end(`${filePath} is not a directory or file\n ${ex.error}`)
}
}
主要代码是
运行结果
首次
刷新