Apache服务器+阿里云oss设置浏览器缓存

设置浏览器缓存是网站前端性能优化的手段之一，浏览器访问一个网站时接受到服务器返回的Rreponse Headers消息，指定某些文件的缓存有效时间。当浏览器再次向服务器发出http请求之前，会先检查缓存文件的失效时间，如果http请求中包含未过期的缓存文件，则浏览器会忽略掉本次请求，优先使用本地的缓存文件。

网站各页面之间常有共用公共文件的情况，比如各种LOGO、小图标、图片、JS、CSS等文件，通过设置浏览器缓存可以减少http请求和资源下载量，从而提高网页的加载速度。这种优势在使用公共CDN的时候更为明显：以网站最常引用的Jquery库为例，如果用户近期访问的网站引用了某公共CDN的文件地址，再访问你的网站（即使是第一次访问）浏览器会忽略本次jquery文件的请求，直接使用本地缓存。

一、Apache服务器设置浏览器缓存

1、开启headers_moudle或expires_moudle模块

在Apache配置文件中找到：

#LoadModule headers_module modules/mod_headers.so

或

#LoadModule expires_module modules/mod_expires.so

去掉前面的注释“#”，即可开启对于模块，重启Apache使之生效。

2、设置缓存命令

在网站根目录.htaccess（没有的新建一个）文件中加入以下代码（顺序对应上面两个模块的方法）：

<ifmodule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|woff|js|css|swf)$">
Header set Cache-Control "max-age=604800,public"
</FilesMatch>
</ifmodule>

或

<IfModule mod_expires.c>
ExpiresActive On
# 图片
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
# css/js
ExpiresByType text/css "access plus 4 weeks"
ExpiresByType text/javascript "access plus 4 weeks"
# html
ExpiresByType text/html "access plus 2 days"
</IfModule>

其中的缓存时间和需要缓存的文件后缀名自行调整，注意检查一下浏览器缓存是否实际生效。

但是服务器上设置的缓存规则对外部资源无效，比如分离到阿里云OSS上的图片、js、css等资源，需要单独配置。

二、设置阿里云OSS的文件缓存

登录阿里云OSS控制台，选择对应Bucket——传输管理——域名管理，看到如下图红框中的阿里云CDN加速配置项（未配置CDN加速需另行配置），点击：

点击后跳转到CDN控制台，如下图。选择域名管理——缓存设置——HTTP头，点击添加，参数选择Cache-Control，取值填入：max-age=604800(以秒为单位，自己设置一个合适的数字)