控制瀏覽器禁止緩存

前話：

　　1、什么是瀏覽器緩存？
　　　　瀏覽器緩存（Browser Caching）是為了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽。
瀏覽器緩存主要有兩類：緩存協商：Last-modified ，Etag 和徹底緩存：cache-control，Expires。
　　2、網站緩存有什么用？

　　　在瀏覽網頁過程中網站開發人員為了給用戶帶來更佳的瀏覽體驗，使網站加載快速高效往往會在瀏覽器本地也就是設備上面存儲緩存文件，因為網站或者web應用並不是實時大量內容的更新的，而是多數內容基本變化很小，因此在本地存儲一部分文件，這樣就不需要每次都重新加載全部的網站或者web應用信息，節省時間、流量，帶來更佳的訪問體驗。
　　3、為什么要禁用瀏覽器緩存

　　　在提升訪問速度，節省流量的同時，保存緩存文件肯定會占據一定的設備存儲空間，因此有些人在不需要追求時間流量的節省的時候，可以選擇禁用瀏覽器緩存，這樣瀏覽器不會在設備本地保存文件節省了存儲空間。

場景：

　　部分項目在打包上線后，因為不希望有些html緩存。但html的文件名字不會發生改變，就不會重新進行加載，造成頁面故障

 

解決方案：

 

　　1.使用js向url添加隨機參數（注意：若為hash模式，則隨機參數需要放置在 # 前）

　　　  但是這樣做也有一個弊端，因為緩存可以減少對服務器的直接訪問，減少服務器的壓力。瀏覽器不讀取緩存里的內容之后，每次都會訪問服務器，這樣就會增加服務器的壓力。所以應根據情況使用。

if (!window.name) {
  location.href += "?random=" + Date.now();
  window.name = "reloaded";
}

　　

　　2.在html的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" />

　　

　　3.后端設置get請求的response請求頭

response.setDateHeader("Expries", -1);
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");

　　

　　4.在瀏覽器中設置

　　F12打開控制台--->Network---->Disable cache 打鈎

　　F12--->F1--->network ----> Disable cache（while DevTools is open） 打鈎

　　

　　5.更多工具選項 或 ctrl+shift+delete 或 ctrl+f5----> 清除瀏覽數據

 

總結：

　　　　想讓瀏覽器有何種行為，服務端只能通過響應頭的方式來設置
　　　想讓服務器知道何種行為，瀏覽器只能通過請求頭的方式來設置