解决WEB对js、css缓存问题的一种可行方案
by solo
note : 该方案思想非原创,是作者结合互联网上各种解决方案汇总及筛选,实现的一个Demo
解决思想:给更新频繁的js或css请求连接加入版本号。
如下:
<script type="text/javascript" src="../mytest.js?v=20160822" ></script>
<link rel="stylesheet" href="../mytest.css?v=20160822"/>
具体实现思想:每个页面引入公共的内容,该公共内容中含有该版本号;版本号的配置要在配置文件或者可修改处,尽量在增量修改js或css时,修改版本号,但是不必重启服务;
公共部分
common.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="version" value="20160822" />
引用部分
以index.jsp为例
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="common.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mytest.js?v=${version}"></script>
<link href="mytest.css?v=${version}" rel="stylesheet">
<title>no cache</title>
</head>
<body>
<span class="mycss">测试css样式</span>
<input id="testBtn" type="button" value="测试js" />
</body>
</html>
其他代码
mytest.js
$(function(){
alert("bcd");
$("#testBtn").on('click',function(){
alert("abc-3");
});
});
mytest.css
.mycss{
font-size: 30px;
color: blue;
}
引入jar包
jst.jar
standard.jar
[下载地址](http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/)
总结:
1,这种方式未屏蔽浏览器对资源文件的缓存,并不是每次都向服务器端请求资源。
2,在资源文件改动后,服务器端修改公共部分的版本号,浏览器会请求最新的资源文件。
3,版本号放入jsp公共部分,在增量修改js或css等资源文件时,可以很方便的修改版本号,且不必重启服务。