nginx设置资源缓存实战详解
一直很想学习缓存这一块儿的东西，毕竟前端性能优化缓存在其中占了很大一部分作用。缓存分为两种：强制缓存和协商缓存。看过很多文章讲它们之间的区别，但是没有实战过只知道其意义却不知道怎样去设置，没有实战过也导致记忆总是很模糊，实践才是最好的老师！记录一下我使用nginx服务器学习缓存的过程。
初探
首先我在nginx的根目录下新建了一个index.html文件以及index.js文件。此时nginx的配置文件是长这个样子的：
server{
listen8080;
server_namelocalhost;
location/{
root/Volumes/myFile/nginx_root;
indexindex.htmlindex.htm;
}
}
然后我们浏览器访问localhost:8080。打开控制台，发现里面有两条请求：
可以看到第一次访问，两条请求的状态码都是200。我们点开其中一条请求看看响应头信息：
可以看到，响应头中给我们携带了Etag以及Last-Modified信息。这就是协商缓存所使用的字段嘛。看来nginx已经默认给我们使用了缓存。那我们在不修改html文件以及js文件的基础上再次去刷新页面验证一下，命中协商缓存的话，状态码应该给我们返回304NotModified。我刷新了几次去观察http请求的状态码。html文件每次都是返回的304。但是js文件在最初是304后面却变成了200OK(frommemorycache)。也就是说每一次html文件都是命中了协商缓存，而js文件都是命中了强缓存(强缓存的优先级是高于协商缓存的)。为什么会出现这样的情况呢，我百度一下：
为什么有的缓存是200OK(fromcache)，有的缓存是304NotModified呢？很简单，看是否移除了EntityTag。移除了，就总是200OK(fromcache)。没有移除，就两者会交替出现。
那么，两者触发的时机有什么区别呢？200OK(fromcache)是直接点击链接访问，输入网址按回车访问也能触发；而304NotModified是刷新页面时触发，或是设置了强缓存、但EntityTags没有移除时触发。
对照我的例子，我是这样理解的：index.html文件刷新页面命中协商缓存返回了304，而js文件是在index.html文件中链接引入的，所以命中强缓存200OK(fromcache)。为了验证我的想法，我用在地址栏直接访问了index.js文件。地址栏键入：localhost:8080/index.js，此时的确是返回了304给我了，在来看一下此时的请求头：
可以看到此时Cache-Control给的是max-age=0；然后也携带上了协商缓存的相关参数。看来在浏览器是刷新操作的时候就会携带上Cache-Control:max-age=0以此来避免命中强缓存。
nginx禁用强缓存
在试试nginx禁用强缓存之后会发生什么效果。修改nginx配置文件：
server{
listen8080;
server_namelocalhost;
location/{
root/Volumes/myFile/nginx_root;
indexindex.htmlindex.htm;
add_headerCache-Controlno-cache;
#为public可以被任何对象缓存，private只能针对个人用户，而不能被代理服务器缓存
add_headerCache-Controlprivate;
}
}
修改完nginx配置文件之后我们重启一下nginx服务器。此时在访问localhost:8080
可以看到，此时html文件和js文件都是304都是命中协商缓存了。
Cache-Control：no-store
禁止一切缓存（这个才是响应不被缓存的意思）。缓存通常会像非缓存代理服务器一样，向客户端转发一条no-store响应，然后删除对象。
Cache-Control：no-cache
强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。这个很容易让人产生误解，使人误以为是响应不被缓存。实际上Cache-Control:no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。
其实将Cache-Control设置为no-store才是真正的不被缓存的意思，那在修改一下nginx文件将Cache-Control设置为no-store看看会发生什么。此时再次刷新浏览器。
可以看到，修改完nginx的配置文件之后，除了第一次是304(这次访问浏览器才刚刚接收到no-store的信息，请求头上还是携带了缓存相关信息)外，剩下的几次刷新页面都是返回200了。既没有命中强缓存、也没有命中协商缓存。在看一下index.js文件的http头信息。
这里的图我没有截完整，其实响应头中还包含了Cache-Control:no-store。可以看到，在Cache-Control:no-store的加持下，即使在响应头中服务请返回了协商缓存的参数，但是在浏览器在请求资源的时候，并没有带上缓存相关的参数了，所以，现在没有缓存了，既不会命中强缓存，也不会命中协商缓存，每一次http请求的资源都是从服务器上返回的。
结语
这次的探索到现在就结束了，其实就是我一次学习的记录吧。实践了一次之后确实对缓存有了更清晰的理解和认知，果真实践出真知。后续打算还会记录一篇在现在前端使用React.js或者Vue.js等框架打包之后前端资源如何利用nginx做部署还有配置相关缓存的文章，到时候在看有没有记录下来的意义把。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。