HTML页面实现全方位页面缓存

【1】服务端配置一个Filter，实现对js、css和image的缓存

[java] view plain copy

print ?

1. package cn.com.system.filter;  
2.   
3. import java.io.IOException;  
4. import java.util.Enumeration;  
5.   
6. import javax.servlet.FilterChain;  
7. import javax.servlet.FilterConfig;  
8. import javax.servlet.ServletException;  
9. import javax.servlet.ServletRequest;  
10. import javax.servlet.ServletResponse;  
11. import javax.servlet.http.HttpServletResponse;  
12.   
13. public class CacheForWeekFilter {  
14.   
15.     private FilterConfig fc;  
16.   
17.     public void doFilter(ServletRequest req, ServletResponse res,  
18.             FilterChain chain) throws IOException, ServletException {  
19.         HttpServletResponse response = (HttpServletResponse) res;  
20.         for (Enumeration e = fc.getInitParameterNames(); e.hasMoreElements();) {  
21.             String headerName = (String) e.nextElement();  
22.             response.addHeader(headerName, fc.getInitParameter(headerName));  
23.         }  
24.         chain.doFilter(req, response);  
25.     }  
26.   
27.     public void init(FilterConfig filterConfig) {  
28.         this.fc = filterConfig;  
29.     }  
30.   
31.     public void destroy() {  
32.         this.fc = null;  
33.     }  
34. }  

package cn.com.system.filter;

import java.io.IOException;
import java.util.Enumeration;

import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class CacheForWeekFilter {

	private FilterConfig fc;

	public void doFilter(ServletRequest req, ServletResponse res,
			FilterChain chain) throws IOException, ServletException {
		HttpServletResponse response = (HttpServletResponse) res;
		for (Enumeration e = fc.getInitParameterNames(); e.hasMoreElements();) {
			String headerName = (String) e.nextElement();
			response.addHeader(headerName, fc.getInitParameter(headerName));
		}
		chain.doFilter(req, response);
	}

	public void init(FilterConfig filterConfig) {
		this.fc = filterConfig;
	}

	public void destroy() {
		this.fc = null;
	}
}

web.xml配置

[html] view plain copy

print ?

1. <filter>    
2.         <filter-name>CacheForWeek</filter-name>    
3.         <filter-class>cn.com.system.filter.CacheForWeekFilter</filter-class>    
4.         <init-param>    
5.             <param-name>Cache-Control</param-name>    
6.             <param-value>max-age=604800, public</param-value>    
7.         </init-param>    
8.     </filter>    
9.    <filter-mapping>    
10.         <filter-name>CacheForWeek</filter-name>    
11.         <url-pattern>/js/</url-pattern>    
12.     </filter-mapping>    
13.     <filter-mapping>    
14.         <filter-name>CacheForWeek</filter-name>    
15.         <url-pattern>/images/</url-pattern>    
16.     </filter-mapping>    
17.     <filter-mapping>    
18.         <filter-name>CacheForWeek</filter-name>    
19.         <url-pattern>/css/</url-pattern>    
20.     </filter-mapping>   

<filter>  
        <filter-name>CacheForWeek</filter-name>  
        <filter-class>cn.com.system.filter.CacheForWeekFilter</filter-class>  
        <init-param>  
            <param-name>Cache-Control</param-name>  
            <param-value>max-age=604800, public</param-value>  
        </init-param>  
    </filter>  
   <filter-mapping>  
        <filter-name>CacheForWeek</filter-name>  
        <url-pattern>/js/</url-pattern>  
    </filter-mapping>  
    <filter-mapping>  
        <filter-name>CacheForWeek</filter-name>  
        <url-pattern>/images/</url-pattern>  
    </filter-mapping>  
    <filter-mapping>  
        <filter-name>CacheForWeek</filter-name>  
        <url-pattern>/css/</url-pattern>  
    </filter-mapping> 

完成这一步，在服务端已经实现了对页面的缓存，但是当前情况下页面还是会每次访问服务器的，只是压力减小了

如何让页面在一段时间内不访问服务器呢

实现方式是对应公用的JS都放到一个页面中，别的页面包含他，在这个页面中增加页面缓存

[plain] view plain copy

print ?

1. <%@ page language="java" pageEncoding="UTF-8"%>  
2. <meta charset="utf-8" />  
3. <span style="color:#ff0000;"><meta http-equiv="cache-control" content="max-age=604800, public"></span>  
4.   
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
6. <!--IE10-->  
7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />  
8. <!--<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>-->  
9. <meta name=”renderer” content=”webkit|ie-comp|ie-stand” />  
10.   
11. <!-- CSS styles -->  
12. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/base.css" />  
13.   
14. <script src="${pageContext.request.contextPath}/common/jquery/js/jquery-1.8.2.js" charset="utf-8"></script>  
15. <script src="${pageContext.request.contextPath}/common/jquery/js/jquery.ui.core.js" charset="utf-8"></script>  

<%@ page language="java" pageEncoding="UTF-8"%>
<meta charset="utf-8" />
<span style="color:#ff0000;"><meta http-equiv="cache-control" content="max-age=604800, public"></span>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--IE10-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!--<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>-->
<meta name=”renderer” content=”webkit|ie-comp|ie-stand” />

<!-- CSS styles -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/base.css" />

<script src="${pageContext.request.contextPath}/common/jquery/js/jquery-1.8.2.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/common/jquery/js/jquery.ui.core.js" charset="utf-8"></script>