nginx设置资源缓存实战详解

2022-10-14 13:25| 查看: 2392 |来源: 互联网

一直很想学习缓存这一块儿的东西，毕竟前端性能优化缓存在其中占了很大一部分作用。缓存分为两种：强制缓存和协商缓存。看过很多文章讲它们之间的区别，但是没有 ...

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

结语

以上就是小编给大家介绍的nginx设置资源缓存实战详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

本文最后更新于 2022-10-14 13:25，某些文章具有时效性，若有错误或已失效，请在网站留言或联系站长：17tui@17tui.com

·END·

站长网微信号：w17tui，关注站长、创业、关注互联网人 - 互联网创业者营销服务中心

免责声明：本站部分文章和图片均来自用户投稿和网络收集，旨在传播知识，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系我们及时修正或删除。谢谢！

下一篇：linux vi命令知识点用法总结上一篇：Virtual Box复制虚拟机的教程图解

17站长网微信二维码

始终以前瞻性的眼光聚焦站长、创业、互联网等领域，为您提供最新最全的互联网资讯，帮助站长转型升级，为互联网创业者提供更加优质的创业信息和品牌营销服务，与站长一起进步！让互联网创业者不再孤独！

扫一扫，关注站长网微信

nginx设置资源缓存实战详解

大家都在看

相关分类

热门排行

最近更新