JSP/HTML页面（公共JS、CSS、Image缓存）静态缓存

虾米哥阅读：631 2021-03-31 21:36:05 评论：0

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

package com.cache.model.filter; 
 
import java.io.IOException; 
import java.util.Enumeration; 
 
import javax.servlet.Filter; 
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 CacheFilter implements Filter { 
	private FilterConfig fc;   
	 
	@Override 
	public void destroy() { 
		// TODO Auto-generated method stub 
		this.fc = null; 
	} 
 
	@Override 
	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) 
			throws IOException, ServletException { 
		// TODO Auto-generated method stub 
		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);   
	} 
 
	@Override 
	public void init(FilterConfig filterConfig) throws ServletException { 
		// TODO Auto-generated method stub 
		 this.fc = filterConfig;   
	} 
 
}

web.xml配置

<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.5"  
	xmlns="http://java.sun.com/xml/ns/javaee"  
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 
   
  <filter>   
        <filter-name>CacheFilter</filter-name>   
        <filter-class>com.cache.model.filter.CacheFilter</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>CacheFilter</filter-name>   
        <url-pattern>/js/*</url-pattern>   
    </filter-mapping>   
    <filter-mapping>   
        <filter-name>CacheFilter</filter-name>   
        <url-pattern>/images/*</url-pattern>   
    </filter-mapping>   
    <filter-mapping>   
        <filter-name>CacheFilter</filter-name>   
        <url-pattern>/css/*</url-pattern>   
    </filter-mapping>  
 
   
 
</web-app>

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

如何让页面公共资源在用户第一次加载后，就不需要服务器二次加载？

实现方式是对应公用的JS都放到一个页面中，别的页面包含他，在这个页面中增加页面缓存（特定静态资源）

<%@ page language="java" pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<meta charset="utf-8" /> 
<meta http-equiv="cache-control" content="max-age=604800, public"/> 
<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="<%=basePath%>commons/css/bootstrap.min.css" /> 
<script src="<%=basePath%>commons/js/jquery-1.4.2.min.js" charset="utf-8"></script>

页面应用：

<%@ page language="java" pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <jsp:include page="index.jsp" flush="true"/><!--动态包含-->   
<title>页面缓存</title> 
</head> 
<body> 
 
</body> 
</html>

google 浏览器分析：

标签:CSS

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

JSP/HTML页面 （公共JS、CSS、Image缓存）静态缓存

JSP/HTML页面（公共JS、CSS、Image缓存）静态缓存