浏览器缓存系列之三:设置浏览器缓存

设置浏览器缓存

304是协商缓存还是要和服务器通信一次，要想断绝服务器通信，就要强制浏览器使用本地缓存（cache-control/expires），

一般有如下几种方式设置浏览器缓存。

1、通过HTTP的META设置expires和cache-control

<metahttp-equiv="Cache-Control"content="max-age=7200"/>
<metahttp-equiv="Expires"content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)"/>

这样写的话仅对该网页有效，对网页中的图片或其他请求无效。 2、apache服务器配置图片，css，js，flash的缓存 这个主要通过服务器的配置来实现这个技术，如果使用apache服务器的话，可以使用mod_expires模块来实现：

编译mod_expires模块：

Cd/root/httpd-2.2.3/modules/metadata
/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

先打开httpd.conf文件，然后查找expires这个模块，找到后，删除左边的#号，表示打这个模块，并重启apache服务器

编辑httpd.conf配置：添加下面内容

<IfModulemod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"
</IfModule>

3、php等设置

<?php
header("Cache-Control: public");
header("Pragma: cache");
$offset =30*60*60*24;// cache 1 month
$ExpStr ="Expires: ".gmdate("D, d M Y H:i:s", time()+ $offset)." GMT";
header($ExpStr);
?>

或者

$seconds_to_cache =3600;
$ts = gmdate("D, d M Y H:i:s", time()+ $seconds_to_cache)." GMT";
header("Expires: $ts"); header("Pragma: cache");
header("Cache-Control: max-age=$seconds_to_cache");

4、tomcat中设置max-age或expires

首先pom.xml需要引入catalina包,如果不是使用的maven，请自行搜索下载jar包

<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-catalina</artifactId>
<version>7.0.61</version>
</dependency>

注意，版本必须是7.0.61以上的，如果你不是maven需要引入jar包及相关的依赖包。

其次，然后找到你j2ee项目中的web.xml文件，在文件中加入如下内容

<filter>
<filter-name>ExpiresFilter</filter-name>
<filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
<init-param>
<param-name>ExpiresByType text/html</param-name>
<param-value>access plus 1 minutes</param-value>
</init-param>
<init-param>
<param-name>ExpiresByType image</param-name>
<param-value>access plus 10 years</param-value>
</init-param>
<init-param>
<param-name>ExpiresByType text/css</param-name>
<param-value>access plus 10 months</param-value>
</init-param>
<init-param>
<param-name>ExpiresByType application/javascript</param-name>
<param-value>access plus 10 months</param-value>
</init-param>
<init-param>
<param-name>ExpiresByType application/x-unknown-content-type</param-name>
<param-value>access plus 10 years</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>ExpiresFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
</filter-mapping>

以上内容分别对js脚本、css样式、图片以及html页面进行了缓存设置。

其中param-value的值可以设置为比如access plus 1 month 15 days 2 hours

不可以使用以下的任意的类型或类型组合,(这个我没看懂！~)

years months weeks days hours minutes seconds

PS:再次提醒catalina的版本要7.0.61以上的才行，低版本里未实现filters.ExpiresFilter类。

5、nginx设置max-age或expires 在server节点下加入如下代码

location ~* \.(gif|jpg|png|bmp)$ {
expires 10d;
}

这里是设置图片的过期时间为10天。如果你的图片基本不更新可以设置的时间长一些。