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

设置浏览器缓存

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

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

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

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

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

编译mod_expires模块：

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

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

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

1. <IfModulemod_expires.c>
3. ExpiresActive on
5. ExpiresDefault "access plus 1 month"
7. ExpiresByType text/html "access plus 1 months"
9. ExpiresByType text/css "access plus 1 months"
11. ExpiresByType image/gif "access plus 1 months"
13. ExpiresByType image/jpeg "access plus 1 months"
15. ExpiresByType image/jpg "access plus 1 months"
17. ExpiresByType image/png "access plus 1 months"
19. EXpiresByType application/x-shockwave-flash "access plus 1 months"
21. EXpiresByType application/x-javascript "access plus 1 months"
23. #ExpiresByType video/x-flv "access plus 1 months"
25. </IfModule>

3、php等设置

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

或者

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

4、tomcat中设置max-age或expires

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

1. <dependency>
3. <groupId>org.apache.tomcat</groupId>
5. <artifactId>tomcat-catalina</artifactId>
7. <version>7.0.61</version>
9. </dependency>

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

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

1. <filter>
3. <filter-name>ExpiresFilter</filter-name>
5. <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
7. <init-param>
9. <param-name>ExpiresByType text/html</param-name>
11. <param-value>access plus 1 minutes</param-value>
13. </init-param>
15. <init-param>
17. <param-name>ExpiresByType image</param-name>
19. <param-value>access plus 10 years</param-value>
21. </init-param>
23. <init-param>
25. <param-name>ExpiresByType text/css</param-name>
27. <param-value>access plus 10 months</param-value>
29. </init-param>
31. <init-param>
33. <param-name>ExpiresByType application/javascript</param-name>
35. <param-value>access plus 10 months</param-value>
37. </init-param>
39. <init-param>
41. <param-name>ExpiresByType application/x-unknown-content-type</param-name>
43. <param-value>access plus 10 years</param-value>
45. </init-param>
47. </filter>
49. <filter-mapping>
51. <filter-name>ExpiresFilter</filter-name>
53. <url-pattern>/*</url-pattern>
55. <dispatcher>REQUEST</dispatcher>
57. </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节点下加入如下代码

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

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

设置浏览器缓存

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

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

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

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

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

编译mod_expires模块：

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

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

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

1. <IfModulemod_expires.c>
3. ExpiresActive on
5. ExpiresDefault "access plus 1 month"
7. ExpiresByType text/html "access plus 1 months"
9. ExpiresByType text/css "access plus 1 months"
11. ExpiresByType image/gif "access plus 1 months"
13. ExpiresByType image/jpeg "access plus 1 months"
15. ExpiresByType image/jpg "access plus 1 months"
17. ExpiresByType image/png "access plus 1 months"
19. EXpiresByType application/x-shockwave-flash "access plus 1 months"
21. EXpiresByType application/x-javascript "access plus 1 months"
23. #ExpiresByType video/x-flv "access plus 1 months"
25. </IfModule>

3、php等设置

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

或者

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

4、tomcat中设置max-age或expires

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

1. <dependency>
3. <groupId>org.apache.tomcat</groupId>
5. <artifactId>tomcat-catalina</artifactId>
7. <version>7.0.61</version>
9. </dependency>

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

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

1. <filter>
3. <filter-name>ExpiresFilter</filter-name>
5. <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
7. <init-param>
9. <param-name>ExpiresByType text/html</param-name>
11. <param-value>access plus 1 minutes</param-value>
13. </init-param>
15. <init-param>
17. <param-name>ExpiresByType image</param-name>
19. <param-value>access plus 10 years</param-value>
21. </init-param>
23. <init-param>
25. <param-name>ExpiresByType text/css</param-name>
27. <param-value>access plus 10 months</param-value>
29. </init-param>
31. <init-param>
33. <param-name>ExpiresByType application/javascript</param-name>
35. <param-value>access plus 10 months</param-value>
37. </init-param>
39. <init-param>
41. <param-name>ExpiresByType application/x-unknown-content-type</param-name>
43. <param-value>access plus 10 years</param-value>
45. </init-param>
47. </filter>
49. <filter-mapping>
51. <filter-name>ExpiresFilter</filter-name>
53. <url-pattern>/*</url-pattern>
55. <dispatcher>REQUEST</dispatcher>
57. </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节点下加入如下代码

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

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