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

这篇文章主要介绍了基于nginx设置浏览器协商缓存过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

强缓存与协商缓存的区别

　　强缓存：浏览器不与服务端协商直接取浏览器缓存

　　协商缓存：浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源

协商缓存运作原理

　　现在有一个这样的业务情景：后端的静态资源会不定时地发生更新，而因为浏览器默认使用强缓存，会默认从浏览器缓存中取到过时的资源。

　　现在我们希望浏览器每次获取资源的时候都向后端确认资源是否更新，就要设置浏览器使用协商缓存

　　那么后端如何判断资源是否更新了呢？这时就要用到Etag和Last-Modified两项响应头。

　　每次收到一个静态资源的请求时，后端都将资源的最后修改时间（Last-Modified）、根据资源内容计算出来的Etag放在响应头给前端。

　　前端收到响应后将这两项缓存起来，然后在下次请求同样资源的时候，将这两项的内容放到If-Modified-Since和If-None-Match这两项请求头中。

　　服务端收到这两项后，会与资源当前生成的Etag和Last-Modified做比较，如果两者都一致，说明资源没有更新，服务端会返回304空响应；否则，说明资源有更新，服务端会将完整的资源内容返回

实现

　　那么如何实现这样一个复杂的过程呢？其实很简单，只要使用nginx作为静态资源的服务器，再在响应头加上Cache-Control:no-cache就可以了。

　　下面来分步骤实现一下

　　1. 使用nginx作为静态资源的服务器

　　　　在nginx的配置中，将对静态资源的请求映射到资源的磁盘路径上

http {
  server {
  listen 80;
  ...
  location /picture/ {
    alias D:/luozixi/tcp_test/picture/;
    # alias是重定义路径
    # 比如访问127.0.0.1/picture/1_new.gif，则会映射为访问D:/luozixi/tcp_test/picture/1_new.gif
    # web应用根本不会收到请求，picture的请求都被nginx处理了
    # alias是替换，root是拼接
    autoindex on;
    # 访问127.0.0.1/picture/，会得到目录的索引界面
    }
  }
}

　　2. 重新加载nginx配置

nginx -s reload

　　3. 此时，请求静态资源的时候nginx会自动在response头中加上Etag和Last-Modified两项

　　

　　4. 但是这时发现，如果不配置Cache-Contrl: no-cache，浏览器在下次请求这个资源的时候不会将请求发向后端，而是直接从缓存中获取资源

　　5. 在nginx中配置

location /picture/ {
  add_header Cache-Control no-cache;
  alias D:/luozixi/tcp_test/picture/;
}

　　6.清除浏览器缓存后第一次发起请求，会得到一个正常的200 Response，而且响应头里已经有了Cache-Control: no-cache，表示使用协商缓存

　　7.再次发起请求后，会发现请求头已经带上了If-Modified-Since和If-None-Match两项

　　

　　8.服务端（nginx）收到这两项后，会与资源当前生成的Etag和Last-Modified做比较，如果两者都一致，说明资源没有更新，服务端会返回304空响应；否则，说明资源有更新，服务端会将完整的资源内容返回

　　　　另外，服务器验证If-Modified-Since的方式只是简单的字符串比较，即使资源的Last-Modified比If-Modified-Since要早，服务端仍认为资源有更新

　　9.浏览器在收到304响应后，会从浏览器缓存中取资源。因此速度非常块

　　

no-cache与no-store的区别

　　no-cache表示不缓存过期资源，缓存会向服务器进行有效处理确认之后处理资源

　　而no-store才是真正的不进行缓存。

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

赞 (0)

相关推荐

  • Nginx服务器中浏览器本地缓存和虚拟机的相关设置

    自动列出目录配置: 下载过开源软件的都知道,一个很简单的页面列出了所有版本的源码包,这就是开启了自动列出目录 如下配置,在虚拟主机location / {--}目录控制中配置自动列出目录: location / { autoindex on; } 浏览器本地缓存设置: 浏览器是为了加速浏览,浏览器在用户磁盘上对最近请求过的文件进行存储,当访问者再次请求这个页面, 浏览器可以从本地磁盘显示文件,以达到加速浏览的效果,节约了网络资源,提高了网络效率 关键字: expires 默认值: off 作用域

  • 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启用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内容缓存以及常见参数配置详析

    使用场景: 项目的页面需要加载很多数据,也不是经常变化的,不涉及个性化定制,为每次请求去动态生成数据,性能比不上根据请求路由和参数缓存一下结果,使用 Nginx 缓存将大幅度提升请求速度. 基础 只需要配置 proxy_cache_path 和 proxy_cache 就可以开启内容缓存,前者用来设置缓存的路径和配置,后者用来启用缓存. http { ... proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max

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

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

  • 18个运维必知的Nginx代理缓存配置技巧(你都掌握了哪些呢)

    我们都知道应用程序和网站的性能是他们成功的关键因素.但是,使您的应用程序或网站表现更好的过程并不总是很清楚.代码质量和基础架构当然至关重要,但在许多情况下,您可以通过专注于一些非常基本的应用程序的交付技术,对应用程序的最终用户体验进行大量改进. 其中一个例子是在应用程序栈中实现和优化缓存.在教程中介绍的技术可以帮助新手和高级用户使用 Nginx 中包含的内容缓存功能,从而获得更好的性能. 概览 内容缓存位于客户端和源服务器 (upstream) 之间,并保存它看到的所有内容的副本.如果客户端请求

  • 讲解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 cache不缓存问题的原因与解决方案

    nginx.conf 部分内容: proxy_temp_path /nginx/cache/temp; proxy_cache_path /nginx/cache/path levels=1:2 keys_zone=cache_test:2048m inactive=7d max_size=10g; ...... location ~ .(gif|jpg|jgep|png)$ { proxy_pass http://upstreams; proxy_ignore_headers X-Accel-

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

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

  • 基于docker 搭建Prometheus+Grafana的过程详解

    基于docker 搭建Prometheus+Grafana的过程详解

    一.介绍Prometheus Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prometheus,社会也十分活跃,他们便将它独立成开源项目,并且有公司来运作.Google SRE的书内也曾提到跟他们BorgMon监控系统相似的实现是Prometheus.现在最常见的Kubernetes容器管理系统中,通常会搭配Prometheus进行监控. Prometheus基本原理是通过HTT

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

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

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

  • nginx搭建jsdelivr镜像站过程详解

    目录 创建 jsdelivr 镜像站 使用 jsdelivr 镜像站 ​最近 jsdelivr 可谓国内站长圈的头条常客,这不,又双叒叕(yòu shuāng ruò zhuó)打不开了. 如何解决这个问题?最简单的方法当然是使用别人建立的jsd镜像站,但是稳定性和可靠性就只能看镜像站长的心情了吧.自己动手丰衣足食,还是自己搞个镜像吧. 创建 jsdelivr 镜像站 首先,你需要有一台安装了 nginx 的服务器.推荐使用腾讯云轻量服务器的Matomo镜像,其中集成了最新稳定版 nginx.p

  • android中使用react-native设置应用启动页过程详解

    android中使用react-native设置应用启动页过程详解

    一.背景 在我们使用react-native进行编写代码的时候,当启动应用的时候,我们会看到如下界面 然而,这样的启动界面是非常的不又好,那么我们该怎么进行处理启动界面呢?有如下两种方案 二.方案 1.使用第三方库(react-native-splash-screen) 2.ios系统设置(仅适用ios系统,在这里不做讲解) 三.具体实现方式 一).react-native-splash-screen 1.安装 npm i react-native-splash-screen --save 2.

  • centos6.4+nginx+mysql+php+phpmyadmin整合过程详解

    本文实例讲述了centos6.4+nginx+mysql+php+phpmyadmin整合过程.分享给大家供大家参考,具体如下: 装了很多次机,做了很多次重复工作,最后,总结以下装CentOS经验: 注:很多问题其实都不是问题,先把selinux关了!setenforce 0 ,不然会死的很惨! 1. 先更新源 启用国内的源:163或sohu 163:http://mirrors.163.com/.help/centos.html 如果想使用新的软件,建议用REPL和remi的源 #remi的源

  • linux上nginx安装部署及使用过程详解

    linux上nginx安装部署及使用过程详解

    1.下载 官网下载地址 2.部署 2.1安装前提 在linux下安装需要安装一下组件 1. gcc && g++ yum install gcc-c++ 2. pcre yum install -y pcre pcre-devel 3. zlib yum install -y zlib zlib-devel 4. openssl yum install -y openssl openssl-devel 2.2 安装 1. 解压nginx文件 tar -zxvf nginx-1.17.5.t

  • vue 动态设置浏览器标题的方法详解

    vue 动态设置浏览器标题的方法详解

    目录 废话 正文 第一种 router/index.js 第二种 1.安装插件 2.main.js 引用 3.添加指令 笔记 总结 废话 平时设置浏览器标题是这样的 但vue是单页面应用,入口文件也只有一个html,只能设置一个标签,所以下面介绍两种常用的动态设置浏览器标签的方法 正文 第一种 使用浏览器原生方法 document.title router/index.js router.beforeEach里 //多语言项目,根根据自己项目来 import i18n from '@/i18n/

  • Nginx开启Brotli压缩算法实现过程详解

    前言 在web应用中,为了节省流量,降低传输数据大小,提高传输效率,常用的压缩方式一般都是gzip,今天我们来介绍另外一种更高效的压缩方式brotli. Brotli 是基于LZ77算法的一个现代变体.霍夫曼编码和二阶上下文建模.Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本,特别侧重于HTTP压缩. 注意:使用算法的前提是启用了 https,因为 http 请求中 request header 里的 Accept-Encoding: gzip, defl

  • 基于Linux网关服务器squid配置过程详解

    前言 在此,我们要配置一个只对内部网络提供代理服务的 Proxy Server.它具有如下功能它将用户分为高级用户和普通用户两种,对高级用户采用网卡物理地址识别的方法, 普通用户则需要输入用户名和口令才能正常使用. 高级用户没有 访问时间和文件类型的限制,而普通用户只在上班时可以访问以及一些其它的限制. 安装 从源中安装 源中自带稳定版本,执行下面的命令进行安装 sudo apt-get install squid squid-common 源码编译安装 当然你也可以到官方网站下载最新的版本进行

随机推荐