nginx设置资源缓存实战详解

一直很想学习缓存这一块儿的东西，毕竟前端性能优化缓存在其中占了很大一部分作用。缓存分为两种：强制缓存和协商缓存。看过很多文章讲它们之间的区别，但是没有实战过只知道其意义却不知道怎样去设置，没有实战过也导致记忆总是很模糊，实践才是最好的老师！记录一下我使用nginx服务器学习缓存的过程。

初探

首先我在 nginx 的根目录下新建了一个 index.html 文件以及 index.js 文件。此时 nginx 的配置文件是长这个样子的：

server {
 listen  8080;
 server_name localhost;
 location / {
  root /Volumes/myFile/nginx_root; 
  index index.html index.htm;
 }
}

然后我们浏览器访问 localhost:8080。打开控制台，发现里面有两条请求：

可以看到第一次访问，两条请求的状态码都是 200。我们点开其中一条请求看看响应头信息：

可以看到，响应头中给我们携带了 Etag 以及 Last-Modified 信息。这就是协商缓存所使用的字段嘛。看来 nginx 已经默认给我们使用了缓存。那我们在不修改 html文件以及js文件的基础上再次去刷新页面验证一下，命中协商缓存的话，状态码应该给我们返回 304 Not Modified 。我刷新了几次去观察http请求的状态码。html文件每次都是返回的 304。但是 js 文件在最初是 304 后面却变成了 200 OK (from memory cache) 。也就是说每一次html文件都是命中了协商缓存，而js文件都是命中了强缓存(强缓存的优先级是高于协商缓存的)。为什么会出现这样的情况呢，我百度一下：

为什么有的缓存是 200 OK (from cache)，有的缓存是 304 Not Modified 呢？很简单，看是否移除了 Entity Tag。移除了，就总是 200 OK (from cache)。没有移除，就两者会交替出现。

那么，两者触发的时机有什么区别呢？200 OK (from cache) 是直接点击链接访问，输入网址按回车访问也能触发；而 304 Not Modified 是刷新页面时触发，或是设置了强缓存、但 Entity Tags 没有移除时触发。

对照我的例子，我是这样理解的： index.html 文件刷新页面命中协商缓存返回了 304，而 js 文件是在 index.html 文件中链接引入的，所以命中强缓存 200 OK (from cache) 。为了验证我的想法，我用在地址栏直接访问了 index.js 文件。地址栏键入：localhost:8080/index.js，此时的确是返回了 304 给我了，在来看一下此时的请求头：

可以看到此时 Cache-Control 给的是max-age=0；然后也携带上了协商缓存的相关参数。看来在浏览器是刷新操作的时候就会携带上 Cache-Control:max-age=0 以此来避免命中强缓存。

nginx禁用强缓存

在试试 nginx 禁用强缓存之后会发生什么效果。修改 nginx 配置文件：

server {
 listen  8080;
 server_name localhost;
 location / {
  root /Volumes/myFile/nginx_root; 
  index index.html index.htm;
  add_header Cache-Control no-cache;
  # 为 public可以被任何对象缓存，private只能针对个人用户，而不能被代理服务器缓存
  add_header Cache-Control private;
 }
}

修改完 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 做部署还有配置相关缓存的文章，到时候在看有没有记录下来的意义把。