细说缓存与304

https://www.cnblogs.com/libin-1/p/7067912.html

写在最前

在平时的前端开发中我们经常会遇到这种操作。明明我代码更新了，咋刷出来还是以前的呢？是不是缓存了？快清下缓存看看！你看页面是304，怪不得没更新！等等很多情况。作者起初也不是很了解，因为这个不由前端来控制，都是后端的操作。故这次使用node也来写一个控制缓存的服务来真正搞明白这里的道道。欢迎关注我的博客，不定期更新中——

浏览器缓存机制

在说这个服务如何写之前我们先要明白浏览器缓存到底是个啥。来看下这个简略示意图：

可以看到浏览器的缓存机制分为两个部分。1、当前缓存是否过期？2、服务器中的文件是否有改动？

第一步：判断当前缓存是否过期

这是判断是否启用缓存的第一步。如果浏览器通过某些条件(条件之后再说)判断出来，ok现在这个缓存没有过期可以用，那么连请求都不会发的，直接是启用之前浏览器缓存下来的那份文件：

图中看到这个css文件缓存没有过期，被浏览器直接通过缓存读取了出来，注意这个时候是不会向浏览器请求的！如果过期了就会向服务器重新发起请求，但是不一定就会重新拉取文件！

第二步：判断服务器中的文件是否有改动

1、缓存过期，文件有改动

如果服务器发现这个文件改变了那么你肯定不能再用以前浏览器的缓存了，那就返回个200并且带上新的文件：

2、缓存过期，文件无改动

同时如果发现虽然那个缓存虽然过期了，可你在服务器端的文件没有变过，那么服务器只会给你返回一个头信息(304)，让你继续用你那过期的缓存，这样就节省了很多传输文件的时间带宽啥的。看下图：

过期了的缓存需要请求一次服务器，若服务器判断说这个文件没有改变还能用，那就返回304。浏览器认识304，它就会去读取过期缓存。否则就真的传一份新文件到浏览器。

如何判断缓存的过期以及文件的变动？

在刚才的叙述中作者没有提到具体的判断过期及变动的实现方式，这也是为了可以让童鞋们现有一个整体的概念，无关乎代码，至少通过上面一段讲述，可以认识到“哦浏览器的缓存是这样一个流程”，就够了。下面我们来看下具体的如何操作：

判断缓存过期

主要的方式有两种，这两种都是设定请求头中的某一个字段来实现的：1、Expires；2、Cache-Control。由于Cache-Control设置后优先级比前者高，这次作者就先说下通过Cache-Control来控制缓存。

可以看到Cache-Control字段有很多值，其他的值有兴趣的同学可以自己尝试，现在作者要说最后一个值max-age；如果在请求头中设定了

var maxAgeTime = 60 //过期时间 res.writeHead(200, { "Cache-Control": 'max-age=' + maxAgeTime
})

那么在60s内，如果再去请求这个文件的话，是不会发起请求的。因为还没有过期呢！唯一例外是如果这个文件是你在浏览器地址栏输入的地址来请求的（比如你请求localhost:3030/static/style.css），当你刷新的时候就会让当前的这个文件所设定的过期时间失效，直接去请求服务器来看是返回个304还是返回新文件。一般这么请求的都是我们常说的入口文件，入口文件一刷新就会重新向服务器请求，但是入口文件里面所引入的文件如js，css等不会随着刷新而另过期时间失效。除非你单找出来那个引入链接，通过浏览器地址栏去查询它并刷新：）。

判断文件变动

常用的方式为Etag和Last-Modified，思路上差不多，这里作者只介绍Last-Modified的用法。

Last-Modified方式需要用到两个字段：Last-Modified & if-modified-since。
先来看下这两个字段的形式：

Last-Modified : Fri , 12 May 2006 18:53:33 GMT
If-Modified-Since : Fri , 12 May 2006 18:53:33 GMT

可以看出其实形式是一样的，就是一个标准时间。那么怎么用呢？来看下图：

当第一次请求某一个文件的时候，就会传递回来一个Last-Modified 字段，其内容是这个文件的修改时间。当这个文件缓存过期，浏览器又向服务器请求这个文件的时候，会自动带一个请求头字段If-Modified-Since，其值是上一次传递过来的Last-Modified的值，拿这个值去和服务器中现在这个文件的最后修改时间做对比，如果相等，那么就不会重新拉取这个文件了，返回304让浏览器读过期缓存。如果不相等就重新拉取。

缓存机制流程

本次使用了Cache-Control&Last-Modified来做为缓存机制的判断条件。当然还有多种方式可以使用，希望了解更全面的同学可以去读读这篇文章：Web浏览器的缓存机制

总结前两个部分可以得出以下的流程图，现在再看这张图应该还是很明了的了。

node实现可缓存的服务

var http = require("http") var fs   = require("fs") var url  = require("url")

http.createServer(function(req,res){ var pathname = url.parse(req.url).pathname var fsPath = __dirname + pathname
    fs.access(fsPath, fs.constants.R_OK, function(err){ //fs.constants.R_OK - path 文件可被调用进程读取 if(err) { console.log(err) //可返回404，在此简略代码不再演示 }else { var file = fs.statSync(fsPath) //文件信息 var lastModified = file.mtime.toUTCString() var ifModifiedSince = req.headers['if-modified-since'] //传回Last-Modified后，再请求服务器会携带if-modified-since值来和服务器中的Last-Modified比较 var maxAgeTime = 3 //设置超时时间 if(ifModifiedSince && lastModified == ifModifiedSince) { //客户端修改时间和服务端修改时间对比 res.writeHead(304,"Not Modified")
              res.end()
          } else {
            fs.readFile(fsPath, function(err,file){ if(err) { console.log('readFileError:', err)
                }else {
                    res.writeHead(200,{ "Cache-Control": 'max-age=' + maxAgeTime, "Last-Modified" : lastModified
                    })
                    res.end(file)
                }
            })
          }
        }
    })
}).listen(3030)