1. 瀏覽器緩存的種類
cookie
localStorage和sessionStorage
memory cache 和 disk cache
還有其他一些瀏覽器緩存，如WebSQL、IndexDB等等，不常用就不分析了。
2. 瀏覽器緩存特點分析
2.1. cookie緩存
cookie緩存由服務器端生成，一般用來保存session信息，只要設計合理，一般不會帶來一致性問題。
2.2. localStorage 和 sessionStorage
localStorage是永久緩存，如果升級前端程序涉及緩存鍵值改變，應在頁面加載時調用清理或重新設置緩存內容的JS代碼。
sessionStorage是跟隨當前瀏覽器窗口的數據緩存，關閉重新打開瀏覽器會自動清空。
2.3. memory cache 和 disk cache
memory cache是瀏覽器內部控制的，無法改變，一般也不會帶來副作用。
disk cache是重點關注的瀏覽器端的資源文件緩存。
3. 控制disk cache
Http Response Headers中通過cache-control來控制瀏覽器採取不同的緩存策略。響應頭參數可以通過Web服務器來配置。這裡以Nginx的配置文件為例。
3.1. private（默認）
server {
...
add_header Cache-Control private; （或者不設置，默認為private）
...
}
private 意思是使用瀏覽器緩存，它配合expires、last-modified等參數來判斷資源文件是否需要重新下載。
3.2. no-cache（推薦）
server {
...
add_header Cache-Control no-cache;
...
}
no-cache 並非不使用緩存，而是不直接使用緩存，每次都會向服務器請求響應頭，通過對比ETag判斷資源是否發生變動，如果沒有變動（相應結果304），則使用本地緩存。所以這是個在性能和一致性比較平衡的選項。
3.3. no-store
server {
...
add_header Cache-Control no-store;
...
}
no-store是讓瀏覽器完全不使用緩存，不管資源是否變動，都向服務器請求重新下載資源文件。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/216502.html
微信掃一掃 
支付寶掃一掃 