nginx优化:使用expires在浏览器端缓存静态文件
一,nginx中expires指令的作用
网站的图片等静态文件一旦发布,通常很少改动,
为了减小对服务器请求的压力,提高用户浏览速度,
我们可以设置nginx中的expires,
使用户访问一次后,将图片缓存在用户的浏览器中
说明;如果用户对浏览器强制刷新或着清除缓存,
则expires的设置会失效,因为浏览器本地的缓存文件都没了
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
说明:作者:刘宏缔 邮箱: 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=315360000 Expires: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
原文地址:https://www.cnblogs.com/architectforest/p/12795141.html
- 佛系编程[如何创建一个安全可靠的应用程序]
- 请正确使用http状态码,谢谢!
- Hell is empty and all the devils are here.
- kNN之改进约会网站配对效果(附源码)
- Codeforces 768A Oath of the Night's Watch
- 网站性能测试利器:Puppeteer
- FZU 1889 龟兔赛跑
- 1381 硬币游戏
- 零基础学并查集算法
- POJ 2492 A Bug's Life
- 【Scrapy】走进成熟的爬虫框架
- Codeforces 777C Alyona and Spreadsheet
- HDU 1039 Easier Done Than Said?
- Codeforces 777A Shell Game
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【实战项目代码分享】计算机视觉入门教程&实战项目代码
- Linux部署DNS服务器
- 【C++简明教程】C++简介与环境配置
- PDF 的各种操作,我用 Python 来实现(附网站和操作指导)
- Python中map()函数用法
- 谈谈不同思路下造就的不同产品与公司形态
- OpenCV 处理中文路径、绘制中文文字的烦恼,这里通通帮你解决!
- 如何快速分析大型系统架构?
- Linux小技巧、文件查找、修改、读取
- 我在赏金计划中发现的RACE条件漏洞
- 哦!数组还能这么用,学到了!
- 【C++简明教程】随机数生成
- Pytest标记预期失败得测试用例@pytest.mark.xfail()
- IAT HOOK
- 形式化分析工具(六):HLPSL Tutorial