前端缓存学习1

1 If-Modified-Since 

这个作用和etag类似，node端的代码是这样的

fs.stat("routes/cache/" + md5(params) + ".js", function(err, stat) {
            var lastModified = stat.mtime.toUTCString();
            headers["Last-Modified"] = lastModified;
            var isModifiedSince = "If-Modified-Since".toLowerCase();
            if(req.headers[isModifiedSince] && lastModified == req.headers[isModifiedSince]) {
                res.writeHead(304, "Not Modified");
                res.end();
            } else {
                fs.readFile("routes/cache/" + md5(params) + ".js", function(error, data) {
                    res.writeHead(200, "Ok", {
                        "Last-Modified":  lastModified
                    });
                    res.end(data.toString());
                });
            }
        });

如果head中带有 If-Modified-Since,并且文件的最后修改时间比较，如果一样，返回304 ，不然重新请求

顺便学习下node，stat返回的内容如下

Stats {
  dev: 2114,
  ino: 48064969,
  mode: 33188,
  nlink: 1,
  uid: 85,
  gid: 100,
  rdev: 0,
  size: 527,
  blksize: 4096,
  blocks: 8,
  atime: Mon, 10 Oct 2011 23:24:11 GMT,
  mtime: Mon, 10 Oct 2011 23:24:11 GMT,
  ctime: Mon, 10 Oct 2011 23:24:11 GMT,
  birthtime: Mon, 10 Oct 2011 23:24:11 GMT }

atime是指access time，即文件被读取或者执行的时间，修改文件是不会改变access time的。网上很多资料都声称cat、more等读取文件的命令会改变atime，这其实与系统设置有关的，一般默认不会修改。

ctime即change time文件状态改变时间，指文件的i结点被修改的时间

mtime即modify time，指文件内容被修改的时间。

birthtime即文件创建时间，很多文件系统不支持。

2 node 服务端做了文件md5后缀的操作，用来对比是否修改，这样即使关闭再打开浏览器，也能快速的加载

if (req.param("url").indexOf("common/") > -1 || req.param("url").indexOf("component/") > -1) {
            res.end("false");
            return;
        }
        if (!cacheMap) {
            cacheMap = JSON.parse(fs.readFileSync("cacheMap.js"));
        }
        var path = req.param("url");
        var md5 = req.param("md5");
        paths = path.split("/");
        var localCacheMapMd5 = cacheMap;
        for (var index = 0; index < paths.length; index++) {
            localCacheMapMd5 = localCacheMapMd5[paths[index]];
        }
        if (md5 == localCacheMapMd5) {
            res.end("true");
        } else {
            res.end("false");
        }
    } else {
        res.end("false");
    }

比如下面这里
http://www.3zang.tech/cacheMapAction/?url=javascripts/index/index.js&md5=17bdc557f42b3e3666e3d453decfed0a

cacheMap是这个样子的

{
  "javascripts": {
    "industryPlan_project": {
      "init.js": "05eb2fca843f6730a579def2f0eda9d7"
    },
    "service": {
      "industryPlan_projectService.js": "70ee11d74a22af977033a693c9c5eb93",
      "indexService.js": "872ea94ba67ed65726907a3ec9c0ad3c",
      "aboutUsService.js": "2cc9a4a79f5775137ba9d48a5a82c0c7",
      "service_gTransportService.js": "80757755d8852aac828debc901c1cd13",
      "service_projectLogisticsService.js": "fa92d33c60c6434a68362832a4ad06d6",
      "service_coldChanLogisticsService.js": "1ade2008bdc3f48e6ce934194df04886",
      "service_warehouseIntegrationService.js": "a0642140a86519bb4699912e1a29787e",
      "spec_cargoInsuranceService.js": "b9167c26cfe7daf76653955fff34eb60"
    },
    "index": {
      "init.js": "c6349a816241ef6a1d06bf8d9baef7c3",
      "index.js": "a9424fa7bc19a1cbeadf484b6fb1d8e6"
    },

上面的就是找到index.js对应的md5值

3 对于首屏的js，合并了一把，这里没有压缩，如果压缩了，会更小吧

function setCacheHeader() {
        var headers = {
            "Content-Type": "text/javascript",
            "Cache-Control": "public"
        }
        setFileModifyTime(headers);
    }
    function sendConbineData(params, res) {
        params = params.split(",");
        function getSigleContent(index, params, jsContent) {
            if(index == params.length) {
                if(isUseGlobalCache) {

                    return fs.writeFile("routes/cache/" + md5(params.join(",")) + ".js", jsContent, function () {
                        setCacheHeader();
                    });
                } else {
                    return res.end(jsContent);
                }
            }
            var path = "public/" + params[index];
            fs.readFile(path, function(error, jsText) {
                if(error) {
                    jsContent += "\n";
                } else {
                    jsContent += jsText.toString() + "\n";
                }
                index++;
                return getSigleContent(index, params, jsContent);
            });
        }
        return getSigleContent(0, params, "");
    }
    if(params) {
        fs.exists("routes/cache/" + md5(params) + ".js", function(exists) {
            if(!exists) {
                console.log("combine")
                sendConbineData(params, res);
            } else {
                setCacheHeader();
            }
        });
    }

就是把这几个文件合并起来，存在route下cache下，这样只要有一个用户访问过首页，下次再访问，就从缓存中取，就会快，