JS、CSS文件按需缓存

用户反馈网站出现问题，修改js、css文件上线后，刷新页面后js并未加载修改后的js、css，使用的还是本地缓存的js、css代码。强制刷新一般就会重新去服务器获取新的js、css代码。但不能让用户每次都这样子去做。

如何才能让浏览器使用最新的js、css文件呢？

• 在后面加一个版本号

<link rel="stylesheet" type="text/css" href="../css/common.css?v=1">
<script type="text/javascript" src="../js/common.js?v=1" ></script>

• 修改js、css的文件名

<link rel="stylesheet" type="text/css" href="../css/common1.css">
<script type="text/javascript" src="../js/common1.js" ></script>

• 在后面加上修改日期

<link rel="stylesheet" type="text/css" href="../css/common.css?t=20200514">
<script type="text/javascript" src="../js/common.js?t=20200514" ></script>

淘宝就是采用的加上修改日期。

这种方式既能缓存未修改的js、css，又可以实现重新加载新修改的js、css。

详细说明前端缓存的类型

1、版本

避免升级后受缓存的旧版本文件影响。 使用：${blog:resSuffix()} 例如：all-min.js?V=V5_6_2015-04-29

所有的js和css引用都需要加。

2、启动

每一次重启后缓存失效。比如启动时生成的静态化国际化文件和Ajax存根。 目前没有提供Taglib，可使用：<%=com.tangyuewei.blog.common.SystemEnvironment.getServerStartTime()%>
例如：commmon.js?v=1597814827

3、登录

用户每一次登录后缓存失效，比如菜单、插件等个性化缓存。 使用：${ CurrentUser !=null ? CurrentUser.etagRandom : 0}
例如：main.do?method=headerjs&login_id=165463542

4、不缓存

动态请求，为避免浏览器缓存，url加随机数。 如：main.do?login_id=165463542&rnd=10086

5、ETAG

HTTP的机制，一般使用时间戳作为ETAG的依据。 如果是转发文件，可以用文件的最后更新时间。 比如我们正文中的图片，Ajax的存根。可以使用WebUtil的checkEtag和writeEtag来实现。

6、有效期

response.setDateHeader("Expires", xxx);

参考文献：
https://www.cnblogs.com/wangtao_20/p/4589898.html