問題

在寫靜態網站的時候，經常回面臨某些頁面上傳更新后，查看時會出現沒有更新的清空，就是因為瀏覽器讀取了緩存造成的，需要清空緩存刷新才可以看到頁面的更新，但是有些用戶不知道這些操作。就很頭痛

瀏覽器緩存（強制緩存與協商緩存）

強制緩存

當瀏覽器向服務器發起請求時，服務器會將緩存規則放入HTTP響應報文的HTTP頭中和請求結果一起返回給瀏覽器，控制強制緩存的字段分別是Expires和Cache-Control，其中Cache-Control優先級比Expires高。

協商緩存

協商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程

具體的瀏覽器的緩存原理，這里就不說了，我也不是太明白，可以看下這篇文章
https://juejin.cn/post/6844903593275817998

解決辦法

為頁面加入meta標簽

在head中添加meta標簽以下內容，禁止緩存加載，直接請求服務器

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />Cache-Control`作用于`HTTP1.1` `Pragma`作用于`HTTP1.0` `Expires`作用于`proxies

這樣瀏覽器在資源沒修改的時候也不能加載緩存，十分影響體驗，畢竟不能一棍子打死，在解決靜態資源的時候，還可以為其添加版本號來控制。

js、css加上版本號

在引用鏈接的后面加入相應的版本號，每次修改

<link rel="stylesheet" href="style.css?v=1.0.0"> <script src="main,js?v=1.0.0"></script>

問號后面的不起實際作用，僅當作后綴，讓瀏覽器自動檢測更新最新的css，js等靜態文件。如果用問號加參數的方法，可以添加版本號等信息，同時可以刷新一下瀏覽器端的緩存。這樣在使用靜態文件的時候會方便很多，當然也可以修改資源的名稱這里就不再說了。

href=“style.css?v=1.0.0”
src=“main,js?v=1.0.0”

---

相關知識

Expires

Expires是HTTP/1.0控制網頁緩存的字段，其值為服務器返回該請求結果緩存的到期時間，即再次發起該請求時，如果客戶端的時間小于Expires的值時，直接使用緩存結果。

Expires是HTTP/1.0的字段，但是現在瀏覽器默認使用的是HTTP/1.1，那么在HTTP/1.1中網頁緩存還是否由Expires控制？

到了HTTP/1.1，Expire已經被Cache-Control替代，原因在于Expires控制緩存的原理是使用客戶端的時間與服務端返回的時間做對比，那么如果客戶端與服務端的時間因為某些原因（例如時區不同；客戶端和服務端有一方的時間不準確）發生誤差，那么強制緩存則會直接失效，這樣的話強制緩存的存在則毫無意義，那么Cache-Control又是如何控制的呢？

Cache-Control

在HTTP/1.1中，Cache-Control是最重要的規則，主要用于控制網頁緩存，主要取值為

• public：所有內容都將被緩存（客戶端和代理服務器都可緩存）
• private：所有內容只有客戶端可以緩存，Cache-Control的默認取值
• no-cache：客戶端緩存內容，但是是否使用緩存則需要經過協商緩存來驗證決定
• no-store：所有內容都不會被緩存，即不使用強制緩存，也不使用協商緩存
• max-age=xxx (xxx is numeric)：緩存內容將在xxx秒后失效

相關鏈接：https://zhuanlan.zhihu.com/p/83091549
https://juejin.cn/post/6844903593275817998

總結

以上是生活随笔為你收集整理的Html静态页面更新，解决浏览器缓存不更新问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。