HTTP Cache-Control通用消息头知识点

Cache-Control通用消息头被用于http请求和响应中通过指令来实现缓存机制。缓存指令是单向的，这意味着在请求设置的指令，在响应中不一定包含相同的指令。

可缓存性

指令	表明作用
`public`	表明响应文件可以被任何对象（发送请求的客户端，代理服务器等等）缓存
`private`	表明相应只能单个用户缓存，代理服务器不能缓存（只有发送请求的客户端缓存）
`no-cache`	在释放缓存副本之前，强制高速缓存将请求提交给原始服务器进行验证（下次依然原始服务器验证）

到期

指令	表明作用
`max-age=<seconds>`	设置缓存存储的最大周期，超过时间被认为过期（单位s）
`s-maxage=<seconds>`	覆盖max-age头，仅适用共享缓存，私有缓存中它会被忽略
	在释放缓存副本之前，强制高速缓存将请求提交给原始服务器进行验证（不进行缓存）

重新验证

指令	表明作用
`must-revalidate`	缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源
`proxy-revalidate`	与must-revalidate作用相同，但它仅适用于共享缓存，并被私有缓存忽略

其他

指令	表明作用
`no-store`	缓存不应存储有关客户端请求或服务器响应的任何内容

示例

对于应用程序中不会改变的文件，你通常可以在发送响应头前添加积极缓存。这包括如程序提供的静态文件，例如图像，Css文件JavaScript文件。

Cache-Control:public, max-age=31536000

实际用例
nodejs的服务中，浏览器请求了一个script.js的文件，服务端设置如下：

    if (request.url === "/script.js") {
        response.writeHead(200, {
            "Content-Type" : "text/javascript",
            "Cache-Control": "max-age=200"
        });
        response.end("console.log('script loaded')");
    }

缓存会在浏览器中存200s，在200s以内刷新页面，会得到如下效果。
这里写图片描述
表示是从浏览器的缓存中读取数据。time只用了0ms。

常见问题：
在浏览器中设置缓存时，如果此时服务器端修改了文件，但是浏览器是设置了缓存那么它会从浏览器中去拿缓存。就会导致文件不能更新到客户端，而出错。
如果浏览器不设置缓存，每次都会请求文件，降低了访问速度。所以实际中又希望浏览器缓存css，js，img等文件，提高浏览器访问速度。

前端解决方案：
在例如demo.js等文件名中，都会加上一段哈希码以确保只要文件发生了变化（例如demo767187123.js），哈希码就会发生变化，那么文件名变化了就会再次发送新的请求而像服务器获取最新的数据。