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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Nginx设置静态页面压缩和缓存过期时间的方法

    使用nginx服务器的朋友可能都知道需要设置html静态页面缓存与页面压缩与过期时间的设置了,下面我来给各位同学介绍一下配置方法,包括对ico,gif,bmp,jpg,jpeg,swf,js,css,mp3文件进行本地缓存. 可以通过nginx对服务器上的静态资源进行过期时间设置和对资源进行压缩传输来减少服务器的带宽开销. 以下是nginx对静态资源过期时间的设置方法: location ~* .(ico|gif|bmp|jpg|jpeg|png|swf|js|css|mp3) { root /

  • Nginx启用proxy_cache缓存的方法

    顾名思义,proxy_cache 是用于 proxy 模式(一般也可称为反代)的缓存功能.本文介绍其基本用法. proxy_cache 在 Nginx 配置的 http 段.server 段(location 段)中分别写入不同的配置.http 段中的配置用于定义 proxy_cache 空间,server 段中的配置用于调用 http 段中的定义,启用对 server 的缓存功能. http 段 直接以本站的配置为例: proxy_cache_path /home/nginx/proxy_ca

  • 讲解Nginx服务器中设置本地浏览器缓存的简单方法

    浏览器缓存(Browser Caching) 是为了加速浏览并节约网络资源,浏览器在用户磁盘上对最近请求过的文档进行存储. nginx可以通过 expires 指令来设置浏览器的Header 语法: expires [time|epoch|max|off] 默认值: expires off 作用域: http, server, location 使用本指令可以控制HTTP应答中的"Expires"和"Cache-Control"的头标,(起到控制页面缓存的作用).

  • 使用nginx缓存服务器上静态文件的设置方法

    一.nginx缓存的优点 如图所示,nginx缓存,可以在一定程度上,减少源服务器的处理请求压力. 因为静态文件(比如css,js, 图片)中,很多都是不经常更新的.nginx使用proxy_cache将用户的请求缓存到本地一个目录.下一个相同请求可以直接调取缓存文件,就不用去请求服务器了. 毕竟,IO密集型服务的处理是nginx的强项. 二.如何进行设置 先上个栗子: http{ proxy_connect_timeout 10; proxy_read_timeout 180; proxy_s

  • Nginx上传文件全部缓存解决方案

    Nginx上传文件全部缓存解决方案

    下面通过文字说明给大家详解Nginx上传文件全部缓存解决方案. 因为应用服务器(Jetty)里面实现了上传时写了进度条.经过缓存.就没法读取到进度了.此外,在Nginx处缓存文件,也降低了传输效率. nginx采用1.5.6. 后端采用nodejs+formidable的方式接受上传文件,本问题的对应与采用什么样的后端没太大关系,这里只是交代一下. 问题: 在前端页面上将文件上传,nginx没有将每一块收到的文件数据块转发给后端,而是全部缓存了下来,全部收取完成后再一块一块的转发给后端,显而易见

  • nginx缓存不起作用问题解决方法

    1. nginx不缓存原因 默认情况下,nginx是否缓存是由nginx缓存服务器与源服务器共同决定的, 缓存服务器需要严格遵守源服务器响应的header来决定是否缓存以及缓存的时常.header主要有如下: 复制代码 代码如下: Cache-control:no-cache.no-store 如果出现这两值,nginx缓存服务器是绝对不会缓存的 复制代码 代码如下: Expires:1980-01-01 如果出现日期比当前时间早,也不会缓存. 2. 解决不缓存方案 2.1 方法一:修改程序或者

  • Nginx 反向代理并缓存及缓存清除的方法

    Nginx 反向代理并缓存及缓存清除的方法

    本文介绍了Nginx 反向代理并缓存及缓存清除的方法,分享给大家,具体如下: 一. Nginx 配置 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { log_form

  • Nginx与浏览器缓存的处理方法

    一.浏览器对缓存的处理:Internet选项 ★ 控制请求服务器策略:是忽略资源的缓存策略的情况下额外强制请求服务器的意思.   ★ 检查存储的页面较新版本 1.每次访问网页时               不管是否有缓存.资源状态是否过期,都会再次请求服务器.        2.每次启动Internet Explorer时        不管是否有缓存.资源状态是否过期,都会再次请求服务器.        3.自动               大体上和2是一样的,只是对于图片的策略有点不同.  

  • nginx设置资源缓存实战详解

    一直很想学习缓存这一块儿的东西,毕竟前端性能优化缓存在其中占了很大一部分作用.缓存分为两种:强制缓存和协商缓存.看过很多文章讲它们之间的区别,但是没有实战过只知道其意义却不知道怎样去设置,没有实战过也导致记忆总是很模糊,实践才是最好的老师!记录一下我使用nginx服务器学习缓存的过程. 初探 首先我在 nginx 的根目录下新建了一个 index.html 文件以及 index.js 文件.此时 nginx 的配置文件是长这个样子的: server { listen 8080; server_n

  • JAVAEE Filter 过滤器设置是否缓存实例详解

    在网页中,每次的客户端访问服务器,有部分不用重复请求,如有些图片,视频等就没有必要每次都请求,这样会让服务器增大工作量.为了防止这样,我们采用过滤器来设置客户端是都缓存. 页面的缓存与不缓存设置及html页面中meta的作用 HTTP1.1中启用Cache-Control 来控制页面的缓存与否,这里介绍几个常用的参数: no-cache,浏览器和缓存服务器都不应该缓存页面信息: public,浏览器和缓存服务器都可以缓存页面信息: no-store,请求和响应的信息都不应该被存储在对方的磁盘系统

  • 基于Nginx的Mencached缓存配置详解

    简介 memcached是一套分布式的高速缓存系统,memcached缺乏认证以及安全管制,这代表应该将memcached服务器放置在防火墙后.memcached的API使用三十二比特的循环冗余校验(CRC-32)计算键值后,将数据分散在不同的机器上.当表格满了以后,接下来新增的数据会以LRU机制替换掉.由于memcached通常只是当作缓存系统使用,所以使用memcached的应用程序在写回较慢的系统时(像是后端的数据库)需要额外的代码更新memcached内的数据 特征 memcached作

  • 基于nginx设置浏览器协商缓存过程详解

    这篇文章主要介绍了基于nginx设置浏览器协商缓存过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存 协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 协商缓存运作原理 现在有一个这样的业务情景:后端的静态资源会不定时地发生更新,而因为浏览器默认使用强缓存,会默认从浏览器缓存中取到过时的资源. 现在我们希望浏览器每次获取资源的时候都向后

  • nginx设置资源请求目录的方式详解

    nginx设置资源请求目录的方式详解

    目录 前言 方式1:使用root 案例演示 方式2:使用alias 案例展示 root和alias的区别 总结 前言 开发过程中,在某些场景下,希望某些静态资源文件能够直接通过nginx来访问,比如图片,就可以利用nginx自身的特性设置资源请求目录来满足这个要求 方式1:使用root root :设置请求的根目录 path 为 Nginx 服务器接收到请求以后查找资源的根目录路径 案例演示 如下在nginx的主目录下有一个images的目录,里面有一张图片 下面我们将nginx.conf配置文

  • nginx proxy_cache 缓存配置详解

    前言: 由于本人工作原因,涉及到网络直播领域,其中视频的回放下载,涉及到了一些视频下载方面的技术.针对于一个完整视频的下载,目前市面上的主流做法是,先将整个视频流切片,存储到文件服务器中,在用户需要观看回放视频时.通过一个视频回源服务器,去文件服务器中逐个请求切片,返回给用户播放. 今天着重探讨的是关于回源服务器缓存的配置以及合理的缓存策略. 通过给回源服务器配置缓存的案例,详细讲解一整套缓存配置机制,并且可沿用到其他任何缓存配置场景中. 今天的讲解分为四点: 回源服务器的工作是啥为啥 需要给回

  • Nginx配置参数中文说明详解(负载均衡与反向代理)

    PS:最近在看<<高性能Linux服务器构建实战>>的Nginx章节,对其nginx介绍的非常详细,现把经常用到的Nginx配置参数中文说明摘录和nginx做负载均衡的本人真实演示实例抄录下来以便以后查看! Nginx配置参数中文详细说明 #定义Nginx运行的用户和用户组 user www www; # #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; # #全局错误日志定义类型,[ debug | info | notice | war

  • Nginx安装与使用教程详解

    Nginx安装与使用教程详解

    前言 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口网站及搜索引擎Rambler(俄文:Рамблер)使用.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好.(百度百科- http://www.dwz.cn/x32kG) 1.Nginx安装 我使用的环境是64位 Ubuntu 14.04.ngin

  • .NET 6开发之实现缓存过程详解

    .NET 6开发之实现缓存过程详解

    目录 需求 目标 原理与思路 实现 使用原生ResponseCaching实现缓存 使用Marvin.Cache.Headers实现更多缓存功能 一点扩展 总结 参考资料 需求 有的时候为了减少客户端请求相同资源的逻辑重复执行,我们会考虑使用一些缓存的方式,在.NET 6中,我们可以借助框架提供的中间件来实现请求资源的缓存. 目标 实现请求结果的缓存. 原理与思路 对于在.NET6中实现缓存,我们可以使用响应缓存中间件ResponseCaching来实现,同时可以使用Marvin.Cache.H

  • Google Kubernetes Engine 集群实战详解

    Google Kubernetes Engine 集群实战详解

    目录 GKE 集群介绍 K8s 带来的好处 使用 GKE 编排集群 GKE 集群介绍 Google Kubernetes Engine (GKE) 集群由 Kubernetes 开源集群管理系统提供支持.Kubernetes 为用户提供了与容器集群进行交互的机制.您可以使用 Kubernetes 命令和资源来部署和管理应用.执行管理任务.设置政策,以及监控您部署的工作负载的运行状况. K8s 带来的好处 自动管理 对应用容器进行监控和活跃性探测 自动扩缩 滚动更新 Google Cloud 上的

随机推荐