如何避免瀏覽器快取靜態文件

如何阻止瀏覽器快取靜態資源？這篇文章就跟大家介紹阻止瀏覽器快取靜態資源的幾種方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

為什麼需要避免瀏覽器快取？

工作中很多場景都需要避免瀏覽器緩存，例如：當我們對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=&#39;jquery.min.js?rnd= " + Math.random() + " &#39;></s " + " cript> " )
 
// 方法二： 
var  js = document.createElement( " script " )
js.src = " jquery.min.js " + Math.random()
document.body.appendChild(js)

註：如上例，如果採用隨機數的話，則js檔案將永遠無法使用緩存，每次都必須重新從伺服器加載，即使沒有任何更改。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

以上是如何避免瀏覽器快取靜態文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！