解決WEB對js、css緩存問題的一種可行方案

解決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等資源文件時,可以很方便的修改版本號,且不必重啓服務。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章