Nginx配置浏览器缓存,页面展示更快一步

news2024/9/23 17:17:34

1.简介

缓存能够存储请求的响应结果,可以很方便的再次访问,使用缓存的优点是很明显的。

  • 加速内容的访问,降低响应时间
  • 减少服务器的负载

Nginx不仅仅是一个web服务器,它也是一个web缓存服务器。通过Nginx缓存,我们对一些静态资源或者更新频率低的数据做缓存,降低请求的响应时间,同时也能降低服务器的负载,一举多得。

web缓存通常有以下分类:

  • 客户端缓存(浏览器缓存等)
  • 服务器缓存(Nginx缓存、Redis缓存等)

我们将着重介绍浏览器缓存

2.浏览器缓存

B/S架构是一种很流行的软件架构,浏览器在这种架构中扮演着极其重要的角色。

在使用浏览器的过程中,要刷新页面,可以使用快捷键F5刷新,这个时候有些小伙伴可能会遇到页面信息并没有刷新的情况,这就是浏览器缓存在“作祟”,这个时候我们需要强制刷新(Ctrl + F5),才能够越过浏览器缓存获取最新的数据。

对于浏览器缓存,有以下几个关键点:

  • 浏览器为什么要对资源进行缓存
  • 浏览器获取缓存的流程

1)浏览器为什么要对资源进行缓存呢?

为了节约网络资源,加速访问,浏览器会在用户磁盘上对最近访问的页面的资源进行存储,当再次访问该页面时,浏览器就可以从磁盘缓存中加载这些资源,避免频繁向服务器发起请求,这样可以加速页面的展示,并降低服务器的负载。

2)浏览器获取缓存的流程

既然浏览器可以将页面的资源缓存到本地磁盘,那么浏览器又是怎么去加载这些缓存资源的呢?

下面这张图就是具体流程:

图里面存在几个header的定义:

header示例说明
Etag“6459ce31-15499”资源的哈希码
Last-ModifiedTue, 09 May 2023 04:38:09 GMT用于表示资源最后修改时间
If-None-Match“6459ce31-15499”将当前资源的哈希码发送给服务器进行匹配
If-Modified-SinceTue, 09 May 2023 04:38:09 GMT将当前资源的最后修改时间发送给服务器进行匹配

了解流程之后,我们来具体演示一下。访问页面:http://192.168.110.98/jquery.js

1)第一次访问,没有缓存,响应状态码:200,资源大小87.5kb

在这里插入图片描述

请求头信息:

响应头信息:

2)新建标签页访问,响应状态码:200,资源来自disk cache,说明是直接加载的磁盘缓存

3)F5刷新页面,状态304,资源大小182B,说明会向web服务器发送请求,服务器响应304,因此浏览器去磁盘缓存加载资源。

🔔Tips:F5刷新页面,会让浏览器认为缓存已过期,因此会走缓存已过期的流程。Ctrl+F5强制刷新页面,会直接跳过浏览器缓存。

请求头信息:

相比第一次访问时,多了两个header:If-Modified-SinceIf-None-Match

3)Nginx对浏览器缓存的配置

前面,在看浏览器获取缓存的流程时,有一步是请求响应,缓存协商,这就涉及到nginx的一些配置指令。

ngx_http_headers_module模块中,该模块可以将ExpiresCache-Control添加到响应头中,供浏览器使用,我们可以对其进行配置。主要的指令如下:

作用域:http, server, location, if in location

语法:expires [modified] time;
expires epoch | max | off;

默认值expires off;

1)expires [modified] time;

time可以为正数,也可以为负数,默认单位为秒。

  • 如果为负数,则响应为:Cache-Control:no-cache,即不缓存
  • 如果为正数或0,则响应为:Cache-Control:max-age=time

示例:设置缓存过期时间10s

location /jquery {
	gzip_types application/javascript;
	gzip_min_length 20;
	# 缓存过期时间10s
	expires 10;
	root   html;
}

发送请求,查看结果,和预期保持一致。Date和Expires的时间也是相差10s。

2) expires epoch | max | off;

指令响应头说明
expires epochExpires:Thu, 01 Jan 1970 00:00:01 GMT
Cache_Control:no-cache
不缓存
expires maxExpires:Thu, 31 Dec 2037 23:55:55 GMT
max-age=315360000
缓存10年
expires off响应头不添加Expires和Cache-Control

以上就是Nginx对浏览器缓存的配置,Nginx是多模块化的,还有很多高级功能,我们后面继续探索。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/510654.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java引用类型(强引用,软引用,弱引用,虚引用)

从Java SE2开始,就提供了四种类型的引用:强引用、软引用、弱引用和虚引用。Java中提供这四种引用类型主要有两个目的:第一是可以让程序员通过代码的方式决定某些对象的生命周期;第二是有利于JVM进行垃圾回收。 强引用&#xff08…

【Linux环境】Linux常用命令记录汇总

Linux常用命令记录汇总 一、传输命令二、打包命令三、创建文件夹或文件命令四、切换用户五、vim相关命令六、权限更改命令 一、传输命令 命令格式: rz 点击回车 sz 文件名 点击回车命令解释: rz(receive Zmodem缩写)上传文件&am…

淘宝时光机入口在哪里怎么打开回溯20年淘宝历史账单?

淘宝时光机入口在哪里怎么打开? 打开淘宝时光机入口:https://www.caochai.com/article-4208.html ,开始回溯20年淘宝历史账单; 淘宝大额内部隐藏优惠券怎么领取? 1、打开淘宝优惠券查询领取入口:https://…

上班摸鱼逛博客,逮到一个字节8年测试开发,聊过之后羞愧难当......

老话说的好,这人呐,一旦在某个领域鲜有敌手了,就会闲得某疼。前几天我在上班摸鱼刷博客的时候认识了一位字节测试开发大佬,在字节工作了8年,因为本人天赋比较高,平时工作也兢兢业业,现在企业内有…

好家伙,一天约了6场面试,又被吊打了....

好兄弟一天约了6场面试,又被吊打了 面试感受 先说一个字 是真的 “ 累 ” 安排的太满的后果可能就是一天只吃一顿饭,一直奔波在路上 不扯这个了,给大家说说面试吧,我工作大概两年多的时间,大家可以参考下 在整个面试…

mysql 连表查询

文章目录 一、内连接二、外连接2.1 左外连接2.2 右外连接 三、总结 写在前面 在MySQL中join操作被称为连接,作用是能连接多个表的数据(通过连接条件),从多个表中获取数据合并在一起作为结果集返回给客户端。即使用连接查询一条SQL…

Redis 主从 + 哨兵模式搭建

前言:以Linux环境为示例 一、整体架构(1主 2从 3哨兵) 二、redis 安装 1、安装路径:/usr/local/redis/redis-6382(可自行指定) 2、解压安装包: 直接解压:tar -axvf redis-5.0.…

国内可以使用的chatgpt站点,有多种工具可用

看到很多人在寻找国内可以使用的chatgpt站点,忍不住来给大家分享一波,这个相对而言还是挺好用的,不限制字数,每天都能白女票使用。看下面正文。 chatgpt的使用方法 在浏览器或者打开我的电脑,顶部车俞入 人工智能聊…

C++好难(5):内存管理

这一节学完,我们 C嘎嘎 就算是正式入门了,但是之后的课还会更上一阶d(ŐдŐ๑) 继续坚持! 【本节目标】 1. C/C内存分布 2. C语言中动态内存管理方式 3. C中动态内存管理 4. operator new与operator delete函数 5. new和delete的实现原…

【在线OJ项目】项目环境与项目演示

目录 一、项目环境 二、项目展示 项目Gitee地址:online-oj: 在线OJ项目实现了核心模块,后续添加竞赛、考试等 (gitee.com)https://gitee.com/PG1886/online-oj 一、项目环境 采用SpringBootSpringMVCMybatis进行服务器开发 前端采用HTMLCSSJS&#…

mysql 5.7.32安装及主从安装信息

最方便的 就是 直接使用docker容器 搭建一个比较方便 或者 直接使用yum源安装,说白了就是少踩坑。 或者 是直接使用 宝塔等工具帮忙,直接脚本跑 宝塔面板 - 简单好用的Linux/Windows服务器运维管理面板 以下是内网两台机器安装的方法 1: 下…

【数据结构】ArrayList与顺序表

目录 1.List接口 2.线性表 3.顺序表 3.1常用方法 3.2常用方法的实现 4.ArrayList 4.1构造方法 4.2遍历 4.3扩容 4.4CVTE面试题:删除相同字符 5.ArrayList的具体实现 5.1洗牌算法 5.2杨辉三角 6.ArrayList的优缺点 1.List接口 List 接口继承于 Collec…

3 天,入门 TAURI 并开发一个跨平台 ChatGPT 客户端

TAURI 是什么 TAURI 是一个使用 Rust 编写的程序框架,它允许我们使用 Web 技术和 Rust 语言构建跨端应用。它提供了大量特性,例如系统通知、网络请求、全局快捷键、本地文件处理等,它们都可以在前端通过 JavaScript 便捷的调用。 TAURI 应用…

《精英的傲慢:好的社会该如何定义成功》笔记与摘录

目录 作者简介 书内容简介 经典摘录 1、现状与现象 2、什么是优绩至上原则 3、对优绩至上原则赞同与否的讨论 4、 优绩至上原则存在的争议点 5、 作为哲学家,桑德尔从道德哲学角度的思考 6、作者对优绩制的批判 7、流动性与平等的关系 8、我们该如何摆脱优…

MyCat分片-垂直分库

文章目录 需求场景一、环境准备二、实现1.MyCat—schema.xml文件配置2.MyCat—server.xml文件配置3.MyCat启动4.MyCat登录5.创建表结构及数据导入 三、全局表配置全局表配置 此文档来源于网络,如有侵权,请联系删除! 需求场景 在业务系统中,涉…

使用ChatGPT辅助学习——让你的学生主动找到学习的方法!

ChatGPT就像一座巨大的金矿,能挖到多少金子,完全取决于你的思维、认知和行动力。 当大部分人还在观望,或者拿着ChatGPT随便玩一玩的时候。 有的人,已经快速把它切入垂直领域,开始深耕。 如果你的孩子或者学生正在上初…

静态库和动态库的制作与使用

1.静态库的制作与使用 小知识:删除命令行,或者是配置好的路径之类的:退出编辑模式后:dd 保存并退出:退出编辑模式后,:wq (1)静态库的制作 1.首先生成你需要加入的文件的.O文件。使用如下代码 …

网络编程六--UDP服务器客户端

写在前面 UDP(User Datagram Protocol)称为用户数据报协议,是一种无连接的传输协议。 UDP的主要应用在即使丢失部分数据,也不影响整体效果的场景。例实时传输视频或音频时,即使丢失部分数据,也不会影响整…

C++11大杂烩

C11大杂烩 文章目录 C11大杂烩介绍语法统一的列表初始化:{}初始化initializer_list简化声明的方式autotypeid().name():获取类型名decltype nullptr范围for循环stl库中的一些变化arrayforward_list final和override右值引用和移动语义左值引用和右值引用 移动构造和…

有没有好用的UI在线设计工具?这5个设计师必备!

这篇文章介绍了 5 款在线UI设计工具,分别是即时设计、InVision Studio、Axure、Framer 和 Principle。其中,即时设计是一款次世代的在线协作UI设计工具,支持多人协同在线设计一键交付、插入交互式动画等功能,最近还更新了全球首款…