缓存页面中的不变元素（CSS/JS/IMAGE）

最新推荐文章于 2024-03-19 18:12:01 发布

shanhuhauu

最新推荐文章于 2024-03-19 18:12:01 发布

阅读量1.4k

点赞数

分类专栏： web性能优化

本文链接：https://blog.csdn.net/shanhuhau/article/details/18798173

版权

web性能优化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨了如何通过HTTP缓存头（Last-modified、Cache-Control、Expires）来优化网页加载速度，特别是在静态资源如CSS、JS、IMAGE上的应用。通过设置合适的缓存策略，可以显著减少服务器负载并提升用户体验。

摘要由CSDN通过智能技术生成

访问一个web站点的时候，第一次访问的时候浏览器需要加载所有的文件，这时候主要依赖服务器的性能、带宽、以及服务器的缓存设置等，当第二次访问的时候，我们完全可以利用客户端浏览器缓存将不变的CSS/JS/IMAGE等元素存到本地，而不必每次向服务器发送请求。

这里需要区分 Last-modified \Cache-Control\Expires三个HTTP请求头的区别，

这里应用的到区别主要是Last-modified需要每次和服务器协商缓存是否过期，主要应用在一些动态内容缓存的处理上。

Cache-Control和Expires只是在第一次的时候请求，之后便会从本地判断是否过期。不同的是Cache-Control是返回的相对时间，比如当前时间之后的一个小时失效，而Expires则是绝对的GMT时间，例如在20.14年1月30日失效

（需要注意的是win下采用的时间和GMT时间有8个小时的时差）

针对（CSS/JS/IMAGE）等静态文件的缓存解决办法是，加一个Filter，这些文件的响应头加上对应的过期时间，

这里采用的是相对的过期时间

public class ResponseHeaderFilter implements Filter {
    FilterConfig fc; 

    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
	String uri=request.getRequestURI();  
        HttpServletResponse response = (HttpServletResponse) res;
       	if (uri.indexOf("/css/")!=-1||uri.indexOf("/js/")!=-1||uri.indexOf("/images")!=-1) {
    			response.setHeader("Cache-Control", "public"); // HTTP/1.1 开启缓存
    			response.setHeader("Pragma", "Pragma"); // HTTP/1.0 开启缓存
 			   response.setHeader("Cache-Control","max-age=604800, public");   
 			  super.doFilter(req, res, chain);  
	}
        // pass the request/response on
        chain.doFilter(req, response);
    } 

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

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

}

这样第二次访问这些URL下的文件的时候，就不会向服务器发送请求，而是采用本地缓存，采用这种优化方式后，我们系统首页首次加载大概需要3s，第二次加载只需要0.3S