浏览器的缓存问题

一、开发者在调试时如何禁止页面缓存，从而保证获取到最新数据

在做web开发中，经常遇到这样的问题：已经修改完css样式或者js代码，F5刷新浏览器，发现刚修改完的代码并没有生效，这个大家都知道是缓存造成的，浏览器这样设计的目的也是为了节省用户流量，因为资源文件一般较稳定，数量多，但修改量少。下面来说说五种解决方法，以及各自的优缺点。

1、简单粗暴的同时按住ctrl-shift-delete三个键来调出“清除浏览数据”功能，效果如下图（不同浏览器大同小异），主要勾选上缓存的图片和文件，清除数据即可，然后刷新，该种方法并不推荐，因为真正的用户都是小白，资源文件发生更新应该让用户无感知的获得最新资源，并且每次清除浏览数据，你访问过的其他网站的资源也被清空了。不推荐。

2、使用ctrl+F5强制刷新当前网站，问题同方法一，略优于方法一，该方法单独强刷当前网站。不推荐。

3、jsp代码中引用js或css文件时在引用路径后面添加一个参数（随机数或者当前时间），示例如下：

<script type="text/javascript" src="/js/yourjs.js?rd=<%=Math.random()%>"></script>

这样在你每次按F5时候，src发生改变，浏览器会重新请求js文件。坏处是这样每次用户刷新页面都会重新下载资源文件，即使你根本没有去修改资源文件，好处是这样处理十分方便。不十分推荐。

4、将浏览器设置为不缓存或使用插件设置为不缓存，这种方法也只是方便开发者，对用户并无益处。不推荐。

5、所有jsp引用相同的taglib，并在公用的jsp中设置一个版本号，并在css或js路径中进行引用，每次发布新版本时候，根据需要来修改版本号。如果资源文件有更新，发布时修改下版本号即可，如果没有更新则不用修改版本号，这样极具可控性。推荐该方法。 操作如下： 
1）所有jsp中均引入taglib.jsp
<%@ include file="/WEB-INF/common/taglib.jsp" %>
2）taglib.jsp中设置一个版本号
//<%@ taglib ...... %>
//该处一般为一些公用的taglib,如c,fn等
//<%@ taglib ...... %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<c:set var="version" value="20170906" />
3）jsp中引用资源时人为添加一个版本号
<link rel="stylesheet" type="text/css" href="${ctx }/static/css/your.css?v=${version}">
<script src="${ctx }/static/js/your.js?v=${version}"></script>

如上操作后每次在修改version的值后，发布到生产，用户访问时，由于src或者href中的v参数发生改变，浏览器就会重新去下载资源文件。

二、浏览器缓存用于提升WEB性能

在对页面的性能优化时，特别是移动端的优化，缓存是非常重要的一环。

浏览器缓存机制设置众多：html5 appcache，Expires，Cache-control，Last-Modified/If-Modified-Since，Etag/If-None-Match，max-age=0/no-cache...,

对http请求来说，客户端缓存分三类：

（1）不发任何请求，直接从缓存中取数据，代表的特性有： Expires ，Cache-Control=和appcache
（2）发请求确认是否新鲜，再决定是否返回304并从缓存中取数据 :代表的特性有：Last-Modified/If-Modified-Since，Etag/If-None-Match
（3）直接发送请求， 没有缓存，代表的特性有：Cache-Control：max-age=0/no-cache

以下是最终的流程图：