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

項目問題

更新上傳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

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