记一些浏览器缓存以前不太熟悉的东西_html/css_WEB-ITnose

浏览器缓存,以前看过不少这方面的资料,一直觉得是运维应该处理的事情,自己重未动手操作过,所以理解不深,也容易忘记.

cache-control,Expires,If-Modified-Since,last-modified

public

响应会被缓存，并且在多用户间共享

private

响应只能够作为私有的缓存，不能再用户间共享。比如POST表单提交时，会帮你保留已经填写的内容，指明每个用户一个缓存

Last-Modified

Last-Modified存放的是文件最后一次修改的时间

格式如下last-modified:Thu, 23 Jul 2015 08:50:29 GMT

这个是设置在响应头里面

if-modified-since

浏览器端接收到服务器端的Last-Modified,记录下来,下次在发送请求的时候,请求头里面带上if-modified-since,它的值就是之前Last-Modified返回的值

缓存的过程

只是个人的一些理解,也不一定都对,静态服务器端用nodejs处理

1.当浏览器第一次访问的时候,所有的文件都要进行下载

2.当服务端收到请求的时候,如果请求的是静态资源(暂时把图片,样式,js规定为静态资源),返回头里面写入Last-Modified,Expires,Cache-Control,Last-Modified是告诉文件最后的修改时间,Expires和Cache-Control是告诉浏览器这些文件可以缓存在浏览器

3.浏览器再次访问该地址时候,如果是直接在浏览器输入,被缓存的文件请求是不会发出去的,如图

4.如果强制刷新(ctrl+r),这时请求就会发出去了,到了服务器端,就根据请求头传来的if-modified-since对比文件的last-modified,如果没有修改,不会返回文件内容,返回状态码304,如图

nodejs的简单实现

var http = require("http");var fs   = require("fs");var url  = require("url");var querystring = require("querystring");http.createServer(function(req,res){    var gurl = req.url,        pathname = url.parse(gurl).pathname;    if( pathname.indexOf("favicon.ico")>=0){        var ico = fs.readFileSync("./favicon.ico");        res.writeHead(200,{            "Content-Type" : "image/x-icon"        })        res.end(ico);        return;    }    if(pathname.indexOf("/static/")==0){        var realPath = __dirname + pathname;        dealWithStatic(pathname,realPath,res,req);        return;    }}).listen(5555);function dealWithStatic(pathname,realPath,res,req){    fs.exists(realPath,function(exists){        if(!exists){            res.writeHead(404,{                "Content-Type" : "text/html"            });            res.end("not find!!!");        }else{            var mmieString = /\.([a-z]+$)/i.exec(pathname)[1],                cacheTime  = 2*60*60,                mmieType;            switch(mmieString){                case "html" :                case "htm"  :                case "xml"  : mmieType = "text/html";                break;                case "css"  : mmieType = "text/css";                break;                case "js"   : mmieType = "text/plain";                break;                case "png"  : mmiType  = "image/png";                break;                case "jpg"  : mmiType  = "image/jpeg";                break;                                default     : mmieType = "text/plain";            }            var fileInfo      = fs.statSync(realPath),                lastModied    = fileInfo.mtime.toUTCString(),                modifiedSince = req.headers['if-modified-since']            if(modifiedSince && lastModied == modifiedSince){                res.writeHead(304,"Not Modified");                res.end();                return;            }            fs.readFile(realPath,function(err,file){                if(err){                    res.writeHead(500,{                        "Content-Type" : "text/plain"                    });                    res.end(err);                }else{                    var d = new Date();                    var expires = new Date(d.getTime()+10*60*1000);                    res.writeHead(200,{                        "Content-Type"  : mmieType,                        "Expires"       : expires.toUTCString(),                        "Cache-Control" : "max-age=" + cacheTime,                        "Last-Modified" : lastModied                    });                    res.end(file);                }            });        }    });} 

查看更多关于记一些浏览器缓存以前不太熟悉的东西_html/css_WEB-ITnose的详细内容...