【常見問題】web開發中瀏覽器緩衝問題__web

轉載請註明出處：http://blog.csdn.net/u012250875/article/details/78332683 1.問題背景

在做web開發中，經常遇到這樣的問題：已經修改完css樣式或者js代碼，F5重新整理瀏覽器，發現剛修改完的代碼並沒有生效，這個大家都知道是緩衝造成的，瀏覽器這樣設計的目的也是為了節省使用者流量，因為資源檔一般較穩定，數量多，但修改量少。下面來說說五種解決方案，以及各自的優缺點。 2.解決方案

方法一

簡單粗暴的同時按住ctrl-shift-delete三個鍵來調出“清除瀏覽資料”功能，效果如下圖（不同瀏覽器大同小異），主要勾選上緩衝的圖片和檔案，清除資料即可，然後重新整理，該種方法並不推薦，因為真正的使用者都是小白，資源檔發生更新應該讓使用者無感知的獲得最新資源，並且每次清除瀏覽資料，你訪問過的其他網站的資源也被清空了。不推薦。

方法二：使用ctrl+F5強制重新整理當前網站，問題同方法一，略優於方法一，該方法單獨強刷當前網站。不推薦。

方法三：jsp代碼中引用js或css檔案時在引用路徑後面添加一個參數（隨機數或者目前時間），樣本如下：

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

這樣在你每次按F5時候，src發生改變，瀏覽器會重新請求js檔案。壞處是這樣每次使用者重新整理頁面都會重新下載資源檔，即使你根本沒有去修改資源檔，好處是這樣處理十分方便。不十分推薦。

方法四：所有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參數發生改變，瀏覽器就會重新去下載資源檔。

注意：參數名v是隨意取的，沒有特別要求

方法五：將瀏覽器設定為不緩衝或使用外掛程式設定為不緩衝，這種方法也只是方便開發人員，對使用者並無益處。不推薦