前端性能優化(2)--合理利用緩存（200 from cache）

緩存的基本流程

其中：
緩存是否過時參考Cache-Control, Expires
緩存是否有效參考Last-Modified，Etag

從流程中咱們能夠發現

• 性能最好的應該是200 from cache，這種資源直接從本地返回，沒有網絡請求
• 以後是304 Not Modified，改狀態碼沒有資源實體，只有頭部告訴瀏覽器文件指紋依舊有效，能夠繼續使用，並同時帶回Expires, Etag等信息，供客戶端更新使用
• 效率最低的是200，因爲還沒有緩存或者緩存已通過期，因此瀏覽器返回對應的資源實體，供瀏覽器使用。

綜上所訴：咱們可讓資源請求變成200 from cache的狀態，以提升性能。在資源發生變更時，能夠利用更改文件名的方法從新獲取，如今不少的打包框架都支持這種方式，好比gulp，webpack，fis3等

幾個和緩存相關的HTTP屬性

• Cache-Control
• Expires
• Last-Modified
• ETag

---

Cache-Control

HTTP1.1中實現。用來控制文件在本地緩存的有效時長。共有如下屬性值：

• public：全部內容都將被緩存(客戶端和代理服務器均可緩存)
• private：內容只緩存到私有緩存中(僅客戶端能夠緩存，代理服務器不可緩存)
• no-cache：必須先與服務器確認返回的響應是否被更改，而後才能使用該響應來知足後續對同一個網址的請求。所以，若是存在合適的驗證令牌 (ETag)，no-cache 會發起往返通訊來驗證緩存的響應，若是資源未被更改，能夠避免下載。
• no-store：全部內容都不會被緩存到緩存或 Internet 臨時文件中
• must-revalidation/proxy-revalidation：若是緩存的內容失效，請求必須發送到服務器/代理以進行從新驗證
• max-age=xxx (xxx是數字)：緩存的內容將在 xxx 秒後失效, 這個選項只在HTTP 1.1可用, 並若是和Last-Modified一塊兒使用時, 優先級較高

Expires
HTTP1.0的屬性，用來指名文件的過時事件，是一個絕對的時間點。因爲服務器事件和客戶端事件可能存在不一致的狀況，因此以後在HTTP 1.1中Cache-Control添加了max-age屬性
。
Last-Modified
Last-Modified是標識文件在服務器上的最新更新時間。下次再次獲取的時候，若是緩存已通過期，則請求頭部會帶上If-Modified-Since字段給服務器，服務器根據該字段和文件的更新事件進行對比，一致則返回304， 不一致將對應文件做爲response返回

ETag
Etag由服務器端生成，客戶端經過If-Match或者說If-None-Match這個條件判斷請求來驗證資源是否修改，常見的是使用If-None-Match。

---

參考：https://blog.csdn.net/lydia88...

用戶點擊刷新：瀏覽器發送Cache-Control:max-age=0 給瀏覽器

手動刷新頁面（F5)，瀏覽器會直接認爲緩存已通過期（可能緩存尚未過時），在請求中加上字段：Cache-Control:max-age=0，發包向服務器查詢是否有文件是否有更新。
強制刷新頁面（Ctrl+F5)，瀏覽器會直接忽略本地的緩存（有緩存也會認爲本地沒有緩存），在請求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），發包向服務從新拉取文件。

---

服務器配置（nginx）

在默認的nginx配置下（去掉了Etag），第一次頁面訪問的時候，返回200 OK，請求的Cache-Control是max-age=0， 返回的Last-Modified 是對應文件的最後修改日期。對應的content-Length是10027

點擊刷新後，發送請求的時候，帶了If-Modified-Since字段，服務器對比If-Modified-Since的值和文件的最後修改日期，二者同樣，因此返回了304 Not Modified

請求的大小是158B，已經不多了，可是，若是連請求都不用，直接200 from-cache就更好了

nginx配置expires

location / {
            expires max;
            etag    off;
            root   html;
            index  index.html index.htm;
        }

重啓nginx

nginx -s reload

第一次請求
Response 頭部的Cache-Control 變成max-age=315360000，Expires變成了2037年

第二次請求（瀏覽器新開一個tab請求）

完成配置