10年网站建设优化实战经验
18217721733

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

上海知九信息 缓存设置 前端性能 网站性能 网站优化 图片优化 web前端 2020-07-19

设置浏览器缓存是网站前端性能优化的手段之一,浏览器访问一个网站时接受到服务器返回的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加速需另行配置),点击:

阿里云OSS对象存储控制台

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

设置阿里云OSS、CDN缓存时间