js css img等靜態資源禁用緩存的方法以及思考


問題:

  1. js,css引入時,瀏覽器首次加載后會緩存文件,避免重復下載,但服務器發新版本后並不會重新下載,需要用戶清緩存
  2. img是服務器根據參數實時生成的,需要重復下載

解決:

使用get參數即 ?param='value' 的形式避免使用緩存
js可以使用?version='' 發新版本時變更版本號
img使用日期+隨機數,保存重復獲取

思考

If-Modified-Since是標准的HTTP請求頭標簽,在發送HTTP請求時,把瀏覽器端緩存頁面的最后修改時間一起發到服務器去,服務器會把這個時間與服務器上實際文件的最后修改時間進行比較。
  如果時間一致,那么返回HTTP狀態碼304(不返回文件內容),客戶端接到之后,就直接把本地緩存文件顯示到瀏覽器中。
  如果時間不一致,就返回HTTP狀態碼200和新的文件內容,客戶端接到之后,會丟棄舊文件,把新文件緩存起來,並顯示到瀏覽器中。

200 OK (from cache) 是瀏覽器沒有跟服務器確認,直接用了瀏覽器緩存;
304 Not Modified 是瀏覽器和服務器多確認了一次緩存有效性,再用的緩存。
Expires:即在 HTTP 頭中指明具體失效的時間,如
Max-age:在 HTTP 頭中按秒指定失效的時間,如下圖。好處是不像方法 1 一樣需要定時檢查是否過期,一旦過期就需要指定新的時間,壞處是只有 HTTP/1.1 支持
https://www.bokeyy.com/post/200-ok-from-cache-vs-304-not-modified.html 這里有具體介紹,沒深入理解,有空可以看看


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM