避免瀏覽器緩存靜態(tài)文件的方法

避免瀏覽器緩存靜態(tài)文件的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

為什么需要避免瀏覽器緩存？

工作中很多場景都需要避免瀏覽器緩存，例如：當(dāng)我們對(duì)css，js，圖片等進(jìn)行改動(dòng)，在刷新網(wǎng)頁，但卻根本沒有效果，這就是因?yàn)橛芯彺娴脑颉?/p>

因此，當(dāng)我們可能要經(jīng)常改動(dòng)的 js，css時(shí)，就需要阻止瀏覽進(jìn)行緩存。

如何避免瀏覽器緩存緩存靜態(tài)文件？

下面我們就來介紹阻止瀏覽器進(jìn)行緩存的方法：

1、請(qǐng)求時(shí)想要禁用緩存, 可以設(shè)置請(qǐng)求頭：

Cache-Control: no-cache, no-store, must-revalidate

2、 增加版本號(hào)

給請(qǐng)求的資源增加一個(gè)版本號(hào)，這是一種常用做法，例：

<link rel="stylesheet" type="text/css" href="../css/style.css?version=1.8.9"/>
<script type="text/javascript" src="../js/jquery.min.js?version=1.7.2" ></script>

這樣做的好處就是：這真正做到了應(yīng)該緩存的時(shí)候緩存靜態(tài)文件，可以自由控制什么時(shí)候加載，并更新緩存最新的資源。

3、使用HTML禁用緩存

HTML也可以禁用緩存， 即在頁面的head標(biāo)簽中加入meta標(biāo)簽。例：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

說明：雖能禁用緩存, 但只有部分瀏覽器支持, 而且由于代理不解析HTML文檔, 故代理服務(wù)器也不支持這種方式。

4、使用隨機(jī)數(shù)

下面我們通過簡單實(shí)例來看看如何使用隨機(jī)數(shù)避免瀏覽器緩存

// 方法一： 
document.write( " <script src='jquery.min.js?rnd= " + Math.random() + " '></s " + " cript> " )
 
// 方法二： 
var  js = document.createElement( " script " )
js.src = " jquery.min.js " + Math.random()
document.body.appendChild(js)

注：如上例，如果采用隨機(jī)數(shù)的話，則 js文件將永遠(yuǎn)得不到緩存，每次都必須重新從服務(wù)器加載，即使沒有任何更改。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)避免瀏覽器緩存靜態(tài)文件的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。