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

作者: zms! 日期: 2014.10.08 本文发布于1999天前 分类: JS琐碎 相关：缓存 CSS JS IMAGE

访问一个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);  
#
");

返回上一页

---

讨论区

---

你可能也喜欢

打开网页，图片延迟加载 2018.05.06,2 pv
JS屏蔽右键简单代码，放在body内即可 2018.04.18,2 pv
微信内置浏览器图片查看方式的原生实现(非jssdk) 2018.04.02,2 pv

---

ZMS系统自带的JS广告代码 2017.05.23,0 pv
简单倒计时JS 2015.08.27,9 pv
使用JS为网站加速，让网站实现"预加载"，加速响应！ 2015.02.27,7 pv