聊聊web缓存那些事！

时间 2019-12-04

标签聊聊 web 缓存那些栏目 HTML 繁體版

原文原文链接

在说缓存那些事以前，必须对http经常使用的状态码有一些简单的了解：html

200 请求已成功，请求所但愿的响应头或数据体将随此响应返回。出现此状态码是表示正常状态

304 Not Modified 强制缓存

固然还有不少其余的状态码，以上200 和 304是本篇文章重点讲到的。

为何要缓存？

减小响应延迟：当服务器发现文件没有更新直接返回304状态码，告诉浏览器直接读缓存就行了，不须要传输资源文件；
减小网络带宽消耗：当副本被重用时会减低客户端的带宽消耗；客户能够节省带宽费用，控制带宽的需求的增加并更易于管理。
若是设置了Cache-Control,expires这样的之类，在有效时间以内不须要再次向服务器发送请求而是直接读取缓存（注意这样状况的状态码是200 也是强制缓存的一种）

怎么缓存

其实就是经过设置http的头信息来进行设置各类缓存的web

Cache-Control

//HTTP 1.1 引入的
//Cache-Control: no-cache/max-age=600
let http = require('http')
let url = require('url')
let util = require('util')
let fs = require('mz/fs')
let stat = util.promisify(fs.stat);
let path = require('path');
let p = path.resolve(__dirname);
http.createServer(async function(req, res) {
    let {pathname} = url.parse(req.url);
    let realPath = path.join(p, pathname);
    console.log(realPath)
    try{
        let statObj = await fs.stat(realPath);
        console.log(statObj)
        res.setHeader('Cache-Control','max-age=10')  //强制缓存 10s内不须要再次请求服务器
        //res.setHeader('Cache-Control','no-cache')
        res.setHeader('Content-Type',require('mime').getType(realPath)+';charset=utf8')
       fs.createReadStream(realPath).pipe(res)
    }catch(e) {
        res.statusCode = 404;
        res.end('404')
    }
}).listen(3000)

咱们请求一个本地的文件
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <img src="/agree.png"/>
</body>
</html>
//在浏览器打开localhost:3000/index.html
//能够看到状态码是200,这个200有两种状况一种是直接读取缓存的 
//1. (from memory cache) 缓存在内存当中；(from disk cache) 缓存在硬盘中
//2. 真的是从服务器中拉取过来的

复制代码

expires

//Expires:Sun, 22 Jul 2018 02:43:42 GMT
//备注：若是Cache-Control和Expires同时存在，Cache-Control说了算
res.setHeader('Expires', new Date(Date.now() + 10*1000).toGMTString()) //强制缓存的另外一种方式，另外强调一点:主网页只有对比缓存没有强制缓存
复制代码

Last-Modified

//对比缓存 为了更加明显的看到对比缓存，咱们将在如下的代码中都将强制缓存关闭
//res.setHeader('Cache-Control','no-cache')

//响应头设置了res.setHeader('Last-Modified',statObj.ctime.toGMTString())
//请求头就会带上req.headers['if-modified-since']

let http = require('http')
let url = require('url')
let util = require('util')
let fs = require('mz/fs')
let stat = util.promisify(fs.stat);
let path = require('path');
let p = path.resolve(__dirname);
http.createServer(async function(req, res) {
    let {pathname} = url.parse(req.url);
    let realPath = path.join(p, pathname);
    console.log(realPath)
    try{
        let statObj = await fs.stat(realPath);
        console.log(statObj)
        // res.setHeader('Cache-Control','max-age=10')  //强制缓存  10s内不须要再次请求服务器
        res.setHeader('Cache-Control','no-cache')
        res.setHeader('Content-Type',require('mime').getType(realPath)+';charset=utf8')
        res.setHeader('Expires', new Date(Date.now() + 10*1000).toGMTString()) //强制缓存 由于上面设置了no-cache，因此这里的设置其实无效
        let since = req.headers['if-modified-since'];
        if (since === statObj.ctime.toGMTString()) {
            res.statusCode = 304                      //服务器的缓存
            res.end();
        } else {
            res.setHeader('Last-Modified',statObj.ctime.toGMTString())
            fs.createReadStream(realPath).pipe(res)
        }
    }catch(e) {
        res.statusCode = 404;
        res.end('404')
    }
}).listen(3000)
//在浏览器打开localhost:3000/index.html  刷新看到就是304，咱们返回状态码304，浏览器就乖乖地去读缓存中的文件了。
//咱们稍微改动一下index.html就能够看到 200 
复制代码

Etag

//对比缓存
//Etag内容的标识 
// 响应头设置了res.setHeader('Etag',statObj.size.toString());  这里设置的是文件大小
//请求头就会带上req.headers['if-none-match'];
//
let http = require('http');
let util = require('util');
let fs = require('fs');
let stat = util.promisify(fs.stat);
let url = require('url');
let path = require('path');
let p = path.resolve(__dirname);
// 比较内容 stat.size (不靠谱)
// 第一次请求Etag:内容的标识  
// 第二次在请求个人时候 if-none-match 
http.createServer(async function(req,res){
    let {pathname} = url.parse(req.url);
    let realPath = path.join(p,pathname);
    try{
        let statObj = await stat(realPath);
        console.log(realPath) 
        res.setHeader('Cache-Control','no-cache');
        let match = req.headers['if-none-match'];
        if(match){
            if(match === statObj.size.toString()){
                res.statusCode = 304;
                res.end();
            }else{
                res.setHeader('Etag',statObj.size.toString());
                fs.createReadStream(realPath).pipe(res);
            }
        }else{
            res.setHeader('Etag',statObj.size.toString());
            fs.createReadStream(realPath).pipe(res);
        }
       
    }catch(e){
        res.statusCode = 404;
        res.end(`not found`);
    }
}).listen(3000);

复制代码

两种缓存的区别

强制缓存

设置强制缓存的方式就是 res.setHeader('Cache-Control','max-age=10')

res.setHeader('Expires', new Date(Date.now() + 10*1000).toGMTString())

以上两种以第一种方式取决定做用

对比缓存

经过时间对比 Last-Modified ---- if-modified-since

经过标识对比 Etag ---- if-none-match

以上就是web缓存的部份内容，不足之处欢迎各位提出宝贵的意见或建议，也但愿能帮助到你从中得到一些知识，谢谢你们的关注！浏览器