避免瀏覽器緩存靜態文件的方法

避免瀏覽器緩存靜態文件的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

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

工作中很多場景都需要避免瀏覽器緩存，例如：當我們對css，js，圖片等進行改動，在刷新網頁，但卻根本沒有效果，這就是因為有緩存的原因。

因此，當我們可能要經常改動的 js，css時，就需要阻止瀏覽進行緩存。

如何避免瀏覽器緩存緩存靜態文件？

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

1、請求時想要禁用緩存, 可以設置請求頭：

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

2、 增加版本號

給請求的資源增加一個版本號，這是一種常用做法，例：

<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>

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

3、使用HTML禁用緩存

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

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

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

4、使用隨機數

下面我們通過簡單實例來看看如何使用隨機數避免瀏覽器緩存

// 方法一： 
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)

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

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