基于node的微小服务——细说缓存与304

写在最前

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

浏览器缓存机制

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

能够看到浏览器的缓存机制分为两个部分。一、当前缓存是否过时？二、服务器中的文件是否有改动？

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

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

图中看到这个css文件缓存没有过时，被浏览器直接经过缓存读取了出来，注意 这个时候是不会向浏览器请求的！ 若是过时了就会向服务器从新发起请求， 可是不必定就会从新拉取文件！

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

一、缓存过时，文件有改动

若是服务器发现这个文件改变了那么你确定不能再用之前浏览器的缓存了，那就返回个200而且带上新的文件：

二、缓存过时，文件无改动

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

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

如何判断缓存的过时以及文件的变更？

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

判断缓存过时

主要的方式有两种，这两种都是设定请求头中的某一个字段来实现的：一、Expires；二、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)复制代码

代码很简单，看注释便可。这只是一个微小的服务，咱们只是关注在文件缓存的方面。

最后

惯例po做者的博客，不定时更新中——有问题欢迎在issues下交流，捂脸求star=。=