nginx開啟緩存機制：

在/etc/nginx/sites-available/default文件加入如下代碼
表示 對圖片、js和css資源實現緩存，過期時間為60秒

        location ~* \.(?:jpg|jpeg|png|gif|ico|css|js)$ {
            root /data;
            expires 60s;
            add_header Cache-Control "public";
        }

下圖表示成功開啟

image.png

緩存過期后都會往服務器獲取資源嗎？

如果緩存未過期，刷新頁面時，資源會顯示200，size為from disk/from memory，表示在本地緩存獲取資源。

image.png

緩存過期后，瀏覽器會去詢問服務端，檢查資源是否被更新，如果沒更新，服務端會返回304，資源依然在讀取本地

image.png

這和cache-controller為no-cache一個意思，并不是說資源都由服務端返回，而是瀏覽器每次都先去詢問服務端，是否有新的資源。

真的有必要開啟緩存嗎？

在模擬10K網絡條件下，加載時間相差5秒，這五秒就是發送http請求的代價，因此建議合理都設置緩存策略。

修改資源真的被更新到了嗎？

我們對app.js進行修改，刷新瀏覽器，如下圖，會返回200，并加載了108K的新資源。其他沒有改動的資源，返回304

image.png

如果在緩存有效期內，我修改app.js，會返回304，因為緩存期內，瀏覽器不去詢問服務端。

image.png

緩存期內怎么強制更新js/css資源？？？

第一步：首先加入test.js腳本, 內容為alert(1)

image.png

第二步：緩存有效期內修改test.js內容為alert(2)，彈框內容依然為數字1
解決方案：修改test.js文件名為test.v1.js并在index.html重新引入（因為我們的html文件沒有緩存，所以可以通過更新html的引用實現資源替換）