引用靜態資源時加上時間戳,處理瀏覽器緩存問題


項目問題

更新上傳CSS文件或JS文件后,安卓手機瀏覽器刷新,頁面樣式沒有改變

問題解決

利用PHP語言,在引用靜態資源時加上時間戳

1 <link rel="stylesheet" type="text/css" href="css/style.css?time=<?php echo date("Ymd",time())?>"/>

 

八種瀏覽器緩存


瀏覽器緩存(Browser Caching)是瀏覽器端保存數據用於快速讀取或避免重復資源請求的優化機制,有效的緩存使用可以避免重復的網絡請求和瀏覽器快速地讀取本地數據,整體上加速網頁展示給用戶。瀏覽器端緩存的機制種類較多,總體歸納為八種:

http緩存

http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重復請求情況下,瀏覽器可以根據協議頭中expires、etag、last-modified等響應頭來判斷從服務器端請求文件還是從本地讀取文件。

適當的緩存控制可以提升用戶體驗,但當應用頻繁升級時,無法確保用戶使用最新的靜態內容。

這個問題可以通過把改動過的靜態資源重命名來解決。比如,為靜態文件附加時間戳,從而讓服務器認為是不同的請求。

application cache

HTML5的應用緩存,是專門為開發離線Web應用設計。

Cookie(或者Cookies),指一般網站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據(通常經過加密)。cookie一般通過http請求中在頭部一起發送到服務器端。一條cookie記錄主要由鍵、值、域、過期時間、大小組成,一般用戶保存用戶的認證信息。cookie最大長度和域名個數由不同瀏覽器決定。

sessionStorage

sessionStorage對象主要用於針對會話的小段數據的存儲。

localStorage

localStorage是html5的一種新的本地緩存方案,取代了globalStorage。一般用來存儲ajax返回的數據,加快下次頁面打開時的渲染速度。

IndexDB

webSql

CacheStorage

更多文章可以來我的個人博客里面看到

歡迎來訪:綿綿小站

參考文章

  1. 九種瀏覽器端緩存方法知多少
  2. 瀏覽器緩存機制及一些緩存問題解決方法
  3. 瀏覽器緩存機制詳解
  4. HTTP協議詳解(真的很經典)
  5. 《JavaScript高級程序設計(第三版)》第23章 離線應用與客戶端存儲 P627
  6. 《高性能JavaScript》章節9.7緩存JavaScript文件 P171


免責聲明!

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



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