html expires缓存,nginx优化:使用expires在浏览器端缓存静态文件
一,nginx中expires指令的作用
网站的图片等静态文件一旦发布,通常很少改动,
为了减小对服务器请求的压力,提高用户浏览速度,
我们可以设置nginx中的expires,
使用户访问一次后,将图片缓存在用户的浏览器中
说明;如果用户对浏览器强制刷新或着清除缓存,
则expires的设置会失效,因为浏览器本地的缓存文件都没了
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,expires指令的语法:
语法: expires [time|epoch|max|off]
默认值: expires off
作用域: http, server, location
使用本指令可以控制HTTP应答中的“Expires”和“Cache-Control”的头标
起到控制页面缓存的作用
Expires头标的值将通过当前系统时间加上设定time值来设定
1,负数表示no-cache
例: -1:指定“Expires”的值为当前服务器时间-1s,即永远过期
2,max:指定“Expires”的值为31 December2037 23:55:55GMT,"Cache-Control"的值为10年
例子:
Cache-Control: max-age=315360000Expires:Thu,31 Dec 2037 23:55:55 GMT
3,epoch:指定“Expires”的值为 1 January,1970,00:00:01 GMT
例子:
Cache-Control:no-cache
Expires:Thu,01 Jan 1970 00:00:01 GMT
可以看到缓存不起作用
4,正数或零表示max-age=time
5,off:关闭,不修改响应头“Expires”和"Cache-Control"的值
三,expires的使用例子
1,对于图片,通常过期时间可以设置为一个月
location ~ \.(gif|jpg|jpeg|png|bmp|ico)$ {
expires 30d;
}
2,对js/css,通常过期时间设置为1周
location ~* \.(js|css)$ {
expires 7d;
}
四,查看expires缓存效果
返回给浏览器的缓存信息:
Cache-Control: max-age:是缓存的总时间长度
Expires:是缓存到期的时间
看截图:
Cache-Control:max-age=2592000
这个cache的时间长2592000秒就是30天:
60x60x24x30 = 2592000
Expires:Wed, 27 May 2020 09:14:43 GMT
我们在4月27日打开的图片文件,会在5月27日过期
五,在缓存过期之前,js文件或图片文件有修改怎么办?
1,
缓存过期之前,js文件和图片会保存在用户的浏览器端,
如果这时我们修改了js/css代码或图片,
此时用户看到的仍然是有问题或未修改过的图片。
这时我们需要通知浏览器,让它重新加载修改过的页面元素。
2,
一个js设置重新加载的例子:
//是否需要刷新的开关设置
var is_refresh_img = true;//生成随机数
var refresh_version =Math.random();
...//如果需要刷新,则给图片的src添加一个随机参数,使浏览器重新加载
if (is_refresh_img == true) {var objs = document.getElementsByClassName("magaimg");for (var i = 0; i < objs.length; i++) {var arr_src = objs[i].src.split("?");
objs[i].src=arr_src[0]+"?t="+refresh_version;
}
}
说明:
refresh_version 可以设置为固定值,不要每次访问页面时都重新生成
因为这样导致缓存失效,导致页面每次加载时都刷新图片
会影响浏览器的访问速度
六,查看ngnix版本
[root@blog ~]# /usr/local/openresty/nginx/sbin/nginx -v
nginx version: openresty/1.15.8.2
html expires缓存,nginx优化:使用expires在浏览器端缓存静态文件相关推荐
- 九种浏览器端缓存机制知多少(转)
浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器 ...
- 你必须要知道的九种浏览器端缓存
原文 http://www.techug.com/browser-cache-methods?utm_source=tuicool&utm_medium=referral 浏览器缓存(Brow ...
- 浏览器Disk Cache磁盘缓存及其协商缓存、及原生App和浏览器实现缓存的差异
浏览器Disk Cache磁盘缓存及其协商缓存.及原生App和浏览器实现缓存的差异 目录 浏览器Disk Cache磁盘缓存及其协商缓存.及原生App和浏览器实现缓存的差异 1.Memory Cach ...
- Nginx优化之expires缓存设置
nginx的缓存设置 提高网站性能对于网站的图片,尤其是新闻站, 图片一旦发布, 改动的可能是非常小的.我们希望 能否在用户访问一次后, 图片缓存在用户的浏览器端,且时间比较长的缓存可以, 用到 n ...
- 某大型政务网站的优化咨询案例(视频点播VOD+GZIP压缩+静态文件CDN+Redis缓存+全文索引)
2022年圣诞节到来啦,很高兴这次我们又能一起度过~ 这次分享关于一个对某大型政务网站的优化咨询的案例,发生在今年的下半年,已过去一段时间,并取得了良好的成果!* 项目背景 某大型政务网站准备上线,需 ...
- nginx html 不缓存,nginx如何实现js和css不缓存
nginx如何实现js和css不缓存 发布时间:2020-12-14 09:52:10 来源:亿速云 阅读:133 作者:小新 小编给大家分享一下nginx如何实现js和css不缓存,相信大部分人都还 ...
- mysql配置优化查询缓存_MySQL优化(4):查询缓存
查询缓存: MySQL提供的数据缓存QueryCache,用于缓存SELECT查询的结果 默认不开启,需要在配置文件中开启缓存(my.ini/my.cnf) 在[mysqld]段中,修改query_c ...
- max点缓存烘焙帧_深入理解浏览器的缓存机制
一.前言 缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一个数据请求来说,可 ...
- 【Web缓存机制系列】2 – Web浏览器的缓存机制
Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...
最新文章
- go语言学习(4)接口,duck typing
- [转载]C# PropertyGrid控件应用心得
- 两个构件的重合点_GTJ2018软件中如何合并两个工程?
- java接口的作用和意义_java什么是接口?接口有什么作用?接口如何使用?
- 沿海产业基地与海润光伏共建产业园开工在即
- Java springcloud B2B2C o2o多用户商城 springcloud架 (二): 配置管理
- Caused by: java.sql.SQLException: Unable to open a test connection to the given database报错无法打开到给定数据库
- 记服务器系统安装中不识别固态硬盘问题
- 软考试题希赛网爬取过程分享二
- 元宇宙虚拟数字人系统
- 幽默笑话,哥们误会了,木子家原创
- STC89C52单片机
- 高品质回音消除 模块 : F-23
- DDIA读书笔记 第五章 数据同步
- 递归方法求最大公约数,求最小公倍数
- 计算机视觉两个入门数据集(mnist和fashion mnist)本地下载地址
- 验证(Verification)与确认(Validation)的区别
- UE4在Windows系统下交叉编译Linux环境
- PlayMaker入门介绍
- 使用Python编写简单的小程序、成绩计算器