快速解決瀏覽器的緩存問題

背景

在開發的過程當中，不少時候會遇到發佈的代碼沒有在瀏覽器上及時生效，場景：

測試：快來看，你這個bug沒有改對
開發：是否是哦，強制刷新一下瀏覽器試試呢
測試：哦，對了...

但真實的用戶怎麼辦？

基礎知識

瀏覽器緩存位置

1.Service Worker (離線網頁，PWA的核心技術)

2.Memory Cache（內存中的緩存）

3.Disk Cache（硬盤中的緩存）

4.Push Cache（推送緩存）

備註：2，3很是常見，1稍微要複雜一點，一些知名網站正在使用，如：淘寶，4沒用過

瀏覽器緩存策略

1.強緩存：不會向服務器發送請求，直接從緩存中讀取資源，會有以下狀態：

2.協商緩存：強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存，會有以下狀態：

備註：304表示雖然經歷了服務器這一步，但該資源沒有更新，因而繼續使用緩存

解決方案

1、 文件名加hash值（最多見的方式）
若是你是用的現成的腳手架，如：vue-cli, create-react-app等，別人已經幫你作好了，基本不能遇到緩存的問題

2、文件名加不了hash值
在實際的項目開發中，就算咱們是基於市面上流行的腳手架開發，也會遇到有一些js文件須要在index.html中直接用script標籤引入，好比：config.js，裏面寫一些前端的配置，好比要訪問的後臺的服務地址等，方便運維部署的時候靈活設置，這樣的文件就不方便加hash值了

對於這類文件每每有兩種解決方式：

1.文件名加版本號，如：config-1.0.0.js，config-2.0.0.js，可參考jQuery
優勢：能夠對這類不常變的文件，設置長時間緩存，文件改變以後，升級版本號，這樣既提升資源加載速度又能及時更新
缺點：文件名改變，index.html裏面的引入也須要對應改變，對外提供的配置文件名不是固定的

2.nginx中配置，如

lcation /config.js { 
        add_header Cache-Control no-cache; 
    }

特定文件每次都向服務器請求，走協商緩存，注意：no-cache 是走協商緩存，no-store 纔是不適用任何緩存
優勢：對外提供的配置文件名統一
缺點：每次都會向後臺請求，由後臺判斷是否使用緩存，速度確定要比直接取本地的慢，但影響不大

我的建議：
若是你的文件很穩定，好比幾個月，半年才修改一次，建議採用第1種
若是你的文件並不穩定，修改的頻率很高，建議採用第2種

注意點

不少人可能會遇到這樣的問題，既沒有在客戶端的請求中控制緩存，也沒有在服務器的返回中控制，爲何瀏覽器仍是會有緩存？

對於這類狀況，瀏覽器默認會採用一個啓發式的算法, 一般會取響應頭的Date - Last-Modified值的10%做爲緩存時間

Date 原始服務器消息發出的時間
Last-Modified 請求資源的最後修改時間

怎麼理解呢，拿config.js來舉個例子，好比當前刷新瀏覽器，向服務器請求時間爲2019-06-06 01:29:55，這時服務器返回的Date爲2019-06-06 01:30:00（假設客戶端到服務器的時間爲5秒）,config.js最近修改的時間是2019-06-06 01:00:00，Last-Modified爲2019-06-06 01:00:00，(Last-Modified - Date) * 10% = 3分鐘，在將來的3分鐘裏，你不管刷新多少次，都會走強緩存，不會請求服務器

能夠看出1.一個資源越長時間不修改，緩存的時間就會越長2.在咱們在開發中，遇到緩存的bug，想要復現，用不停的修改資源文件的方式，卻很難復現的緣由