11.24 静态元素过期时间
时间:2022-04-27
本文章向大家介绍11.24 静态元素过期时间,主要内容包括配置静态元素过期时间目录概要、配置静态元素过期时间、定义静态文件失效日期、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
配置静态元素过期时间目录概要
- 浏览器访问网站的图片时会把静态的文件缓存在本地电脑里,这样下次再访问时就不用去远程下载了 增加配置
<IfModule mod_expires.c>
ExpiresActive on //打开该功能的开关
ExpiresByType image/gif "access plus 1 days"
ExpiresByType image/jpeg "access plus 24 hours"
ExpiresByType image/png "access plus 24 hours"
ExpiresByType text/css "now plus 2 hour"
ExpiresByType application/x-javascript "now plus 2 hours"
ExpiresByType application/javascript "now plus 2 hours"
ExpiresByType application/x-shockwave-flash "now plus 2 hours"
ExpiresDefault "now plus 0 min"
</IfModule>
- 需要expires_module
- curl测试,看cache-control: max-age
配置静态元素过期时间
- 静态元素,就是访问的图片、css、js
- 当用浏览器去访问一个网站的时候,这个网站里所有的静态文件(比如图片的样式、js),浏览器就会默认把静态文件缓存在电脑里,叫做临时的目录或目录
- 缓存的时间是在服务器上定义的,如果不去定义,那么浏览器也不会把这些文件清空,或者浏览器有自己的机制去清空这些文件,或者说电脑软件会定时帮你清理这些缓存的文件
- 为什么电脑会自动加载这些静态文件呢?目的就是第二次,第三次访问的时候,不去服务器去下载这些静态文件了
- 在使用浏览器自带的F12键去进行比对,第一次访问一个图片的时候是200的状态码,第二次访问的时候,就是304,它检测到下载的图片并没有修改过,所以就不会重新到服务器下载一次,这样可以节省带宽,但没有规定缓存什么时候清空,什么时候去服务器上去下载,再次下载,因为只要浏览器检测到图片未做更改,它这个状态码就一直为304,304这个状态码就意味着他不会去服务器下载
定义静态文件失效日期
- expires_module模块,定义失效日期
- 打开虚拟主机配置文件vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf,并添加配置文件
- 需要添加的配置文件
- 这里有所有的图片定义成一天
- 所有的 css 和 js 都定义成两小时
- 其他的没有任何的缓存
<IfModule mod_expires.c>
ExpiresActive on //打开该功能的开关
ExpiresByType image/gif "access plus 1 days" //定义Type类型,这里是一天
ExpiresByType image/jpeg "access plus 24 hours" //定义Type类型,这里是24小时
ExpiresByType image/png "access plus 24 hours" //定义Type类型
ExpiresByType text/css "now plus 2 hour" //定义Type类型,两小时
ExpiresByType application/x-javascript "now plus 2 hours" // 定义Type类型
ExpiresByType application/javascript "now plus 2 hours" //定义Type类型
ExpiresByType application/x-shockwave-flash "now plus 2 hours" //定义Type类型
ExpiresDefault "now plus 0 min" //定义Type类型
</IfModule>
- 在配置文件中添加
[root@hf-01 ~]# vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf
<VirtualHost *:80>
DocumentRoot "/data/wwwroot/111.com"
ServerName 111.com
<VirtualHost *:80>
DocumentRoot "/data/wwwroot/111.com"
ServerName 111.com
ServerAlias www.example.com 2111.com.cn
#<Directory /data/wwwroot/111.com>
#<FilesMatch 123.php>
# AllowOverride AuthConfig
# AuthName "111.com user auth"
# AuthType Basic
# AuthUserFile /data/.htpasswd
# require valid-user
# </FilesMatch>
#</Directory>
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} !^111.com$
RewriteRule ^/(.*)$ http://111.com/$1 [R=301,L]
</IfModule>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/gif "access plus 1 days"
ExpiresByType image/jpeg "access plus 24 hours"
ExpiresByType image/png "access plus 24 hours"
ExpiresByType text/css "now plus 2 hour"
ExpiresByType application/x-javascript "now plus 2 hours"
ExpiresByType application/javascript "now plus 2 hours"
ExpiresByType application/x-shockwave-flash "now plus 2 hours"
ExpiresDefault "now plus 0 min"
</IfModule>
ErrorLog "logs/111.com-error_log"
SetEnvIf Request_URI ".*.gif$" img
SetEnvIf Request_URI ".*.jpg$" img
SetEnvIf Request_URI ".*.png$" img
SetEnvIf Request_URI ".*.bmp$" img
SetEnvIf Request_URI ".*.swf$" img
SetEnvIf Request_URI ".*.js$" img
SetEnvIf Request_URI ".*.css$" img
CustomLog "|/usr/local/apache2.4/bin/rotatelogs -l logs/123.com-access_%Y%m%d.log 86400" combined env=!img
</VirtualHost>
并保存退出
- 然后检查是否存在语法错误
[root@hf-01 ~]# /usr/local/apache2.4/bin/apachectl -t
Syntax OK
[root@hf-01 ~]#
- 查看expire模块是否打开,会发现expire模块没有打开
[root@hf-01 ~]# /usr/local/apache2.4/bin/apachectl -M |grep expire
[root@hf-01 ~]#
- 编辑主配置文件,打开expire模块
- vim /usr/local/apache2.4/conf/httpd.conf
[root@hf-01 ~]# vim /usr/local/apache2.4/conf/httpd.conf
搜索 /expire ,找到该行的配置文件,并去除的注释符 # 号
LoadModule expires_module modules/mod_expires.so
然后保存退出
- 在重新加载配置文件,并查看expire模块
[root@hf-01 ~]# /usr/local/apache2.4/bin/apachectl graceful
[root@hf-01 ~]# /usr/local/apache2.4/bin/apachectl -M |grep expire
expires_module (shared)
[root@hf-01 ~]#
- 按ctrl+F5可以强制把浏览器本地的缓存清空
- 用curl命令去访问图片
[root@hf-01 111.com]# curl -x127.0.0.1:80 111.com/11.png -I
HTTP/1.1 200 OK
Date: Thu, 21 Dec 2017 22:42:28 GMT //当前时间
Server: Apache/2.4.29 (Unix) PHP/5.6.30
Last-Modified: Thu, 21 Dec 2017 14:40:05 GMT
ETag: "20aa-560daacfdbb40"
Accept-Ranges: bytes
Content-Length: 8362
Cache-Control: max-age=86400 //缓存的时间
Expires: Fri, 22 Dec 2017 22:42:28 GMT //过期时间
Content-Type: image/png
[root@hf-01 111.com]#
- 若是将expire模块去除,再去curl命令查看图片,就无法看到Cache-Control参数
- 【转载】记Golang数据库查询封装的坑
- Golang 基本语法学习笔记之流程控制
- Go 语言的演化历程
- JS 评分五角星随鼠标移动显示
- Golang标准库学习——buffio包 ---转
- 【Go 语言社区】Go语言条件变量的两个例子
- mysqlimport导入报错的排查(r10笔记第58天)
- 【Go 语言社区】POJ 1047 Round and Round We Go 循环数新解
- 【Go 语言社区】删除redis所有KEY
- 【Go 语言社区】Golang 动态实例化结构体
- 【Go 语言社区】Go 错误处理
- 【Go 语言社区】Go 语言范围(Range)
- 【Go 语言社区】JS 相关---Window Location
- 【Go 语言社区】Go 语言Map(集合)
- 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 数组属性和方法
- 【JMeter系列-9】 JMeter常用内置对象
- 【JMeter系列-10】JMeter websocket接口测试
- [Mysql-2] 远程连接数据库错误:host 'xxx.xxx' is blocked
- Linux超能力BPF技术介绍及学习分享(技术创作101训练营)
- 已创建好的vue项目引入vuex
- 【Mysql学习之旅-2】经典sql面试题及答案分析
- 【Mysql-3】条件判断函数-CASE WHEN、IF、IFNULL详解
- Linux设备树语法详解
- 【Mysql进阶-2】图文并茂说尽Mysql索引
- 1.8W字|了不起的 TypeScript 入门教程(第二版)
- 【Mysql进阶-3】大量实例悟透EXPLAIN与慢查询
- 基于helium自动化测试的方法进行代码仓库梳理和备份
- 【SpringBoot注解-5】web项目相关注解
- rxjs里的Observable对象如何消费
- 正则表达式入门