『壹』 【瀏覽器緩存問題】HTML靜態文件中,css和js可以添加版本號來刷新緩存,但是只是修改的文字了呢
給網址後面添加一個隨機數(或者是任意的字元串)即可,比如原來的網址是這樣的回:
http....../.../1.htm
改為
http....../.../1.htm?1234
即可(注意問號不答能省)。
瀏覽器是根據網址來緩存的,所以只要給網址接個尾巴,瀏覽器就會認為是新網址,就會從網上重新下載數據了。當然,如果下次再次改變了網頁內容,這個尾巴就要再次修改。
給css和js添加所謂版本號其實也是同一個原理。這個版本號其實就是給css和js的網址接個尾巴而已。
這個也同樣適用網頁裡面的圖片、音樂等資源,事實上只要是http協議的元素都可以利用這個辦法來避開緩存實時刷新。
大型網站通常都有一套比較成熟的自動化部署工具。
在項目發布前,使用該工具進行專部署代碼。屬工具會自動地幫完成資源壓縮、代碼打包、添加版本號、解決執行依賴等問題。
給站一個版本號就行了,服務端輸出到JS尾部。更新JS的時候,修改下版本號就行了。
『叄』 如何自動給CSS、JS添加版本號防止客戶端緩存。
怎麼說呢,個人有個笨點的辦法,就是在代碼中加上JS版本號的全局變數,應用內JS時利用後台代碼添加。容
這樣更改過JS時,將JS的文件名後邊帶上個自定義的版本號,再將JS版本號的變數修改一下就好了。其他程序由於是動態的讀取JS文件名,所以不用再修改,也不用怕漏改。
『肆』 使用requirejs時怎麼解決文件版號和增量更新的問題
看你前後端用什麼技術了,我知道的大概有3種情況。 在這三種情況之前,首先要說的是requirejs對依賴增加hash的方式是通過參數urlArgs: 'ver='v{version}在require.config統一增加的,就我所知似乎不能單獨對每個模塊設置 (但可能是我錯了),即每次都得批量更新版本號。
1.如果你採用過requirejs,且前後端分離,前端採用yeoman構建,那麼只要找到相應的質量高的requirejs的generator,無論是gulp還是grunt, 其yeoman的generator應該已經處理好文件緩存增量更新的問題了。 2.假使前後端分離,前端由gulp/grunt集成,文件版本號增量更新,用下面幾個插件就能處理的比較完美: gulp-rev gulp-rev-all gulp-useref (grunt也能找到類似的) 其中gulp-rev,計算文件hash值,gulp-useref對html內特定註解標簽下的內容合並重寫,gulp-rev-all會考慮css引用圖片hash值改變的情況從而更新css文件hash。 等等總之只要去找總能通過gulp/grunt解決這個問題。 3.如果你使用rails(ruby)等前端友好框架,可能會有流行的解決方案,如果不幸用了老舊前端不友好的框架SpringMVC(java),用gulp對jsp重編譯比較蛋疼。。我不知道有沒有相應的插件,如果沒有你只能在後台維持這個版本號變數,對頁面所有靜態資源添加這個後綴,類似下面的代碼:
var require = {
baseUrl: '/Content',
urlArgs: 'ver='+${static_resource_version},
paths: {...},
deps: ['scripts/home/about']
}
<script src="/Content/bower_components/requirejs/require.js?ver=${static_resource_version}" async></script>
其中path之內的所有腳本,以及deps內的入口腳本,都會被追加urlArgs,只是這樣還無法達到最理想增量更新就是了。。。 此外,對於文件版本號的後綴args我也推薦使用git commit的hash值。
『伍』 如何自動給CSS,JS添加版本號
給CSS、JS添加版抄本號可以防止客戶襲端緩存。
比如:<script src="001.js?2015120710"></script>
001.js?2015120710 ?後面的2015120710是當前js的日期。
如果自動添加,建議還是以日期作為版本號,當然也可以通過程序隨機生成一組數字或字元。
『陸』 一個js文件裡面給該js文件加上版本號能消除緩存嗎
應該是js文件外面版加權
<script id="main"></script>
<script type="text/javascript">
var js = document.getElementById('main');
js.src = 'main.js?v='+ new Date().getTime();
</script>
『柒』 sass構建CSS時,如何給文件隨機加版本號,以防止老文件緩存
假設是在SASS編譯階段生成隨機文件名,在模板文件如何引用一個確定的靜態文件資源呢?
所以應該在發布階段去解析模板文件中的靜態資源,採用一定策略來生成文件名或版本號,一般採用兩種辦法:
1.在模板文件引用靜態資源的時候做處理,加一個過濾器;
2.發布時檢索文件中的link和script,改變文件名;
至於隨機數的策略就無所謂了,時間戳,文件MD5之類的都行,時間戳的好處是簡單暴力,壞處是客戶端的緩存在每次發布後都會無效,MD5的方法會更有效,但是這意味著發布時需要前端和後台的模板代碼最好在一台伺服器上,不然讀取文件做MD5運算會很麻煩;
另外就是如果不是跟後綴的模式,需要配置nginx(假設的伺服器是nginx)或者做一個controller來專門解析資源了。
『捌』 如何引用js文件加隨機數
<script type="text/javascript">
document.write("<s" + "cript type='text/javascript' src='x.js?" + Math.random() + "'></s" + "cript>");
</script>
『玖』 在js中或css中加入v=版本號
添加版本號的原因,可能是因為想要強制瀏覽器不緩存js和css。
1、推薦自動化構工具, webpack之類的,每次寫完編譯文件,自動生成不同的版本的js,css,當然也有小插件可以做到。
2、就是在?v=時間戳,可以把載入js腳本,統一放在一個js裡面 ,聲明時間戳。