天天一點網站優化之：前端靜態資源緩存

---

title: 天天一點網站優化之：前端靜態資源緩存 date: 2019-06-18 17:00:00 tags: -JavaScript categories: JavaScript

關於靜態資源緩存的配置，主要是後端開發的工做，前端開發的同窗確定都有必定的瞭解但並不深刻。

今天咱們就來全面的梳理一下靜態資源緩存：

• 靜態資源緩存的定義是什麼？
• 靜態資源緩存有哪些分類，分別應用在哪些場景？
• 如何實現靜態資源緩存，當前主流的方式是什麼？

首先仍是從一個小故事開始：小c同窗是一名前端程序猿，負責公司門戶網站的維護。這一天，他的大boss丟給他一張5M的大圖，讓他放到網站的首頁。 這麼大的資源，若是每次用戶打開網站以後都要從新從服務器請求一遍，必然形成用戶加載速度的減慢和帶寬的浪費。 因而咱們聰明的主人公想到了緩存的方法：把圖片資源緩存到本地，下次須要這個資源的時候沒必要請求網絡資源，直接從緩存中讀取。

因而小c同窗又開啓了敲代碼之旅。。。

緩存的分類

緩存存在於http的get請求中，瀏覽器能夠根據request和response的header中字段的值、客戶端時間等，智能地判斷使用本地存儲的內容仍是服務端返回的內容。

• 協商緩存304：用戶發送的請求，發送到服務器後，由服務器斷定是否從緩存中獲取資源，若是文件沒有變化，則從緩存中獲取，若是文件有變更，從服務器中獲取新的資源。
• 強緩存200： 用戶發送的請求，緩存時間過時以前，直接從客戶端緩存中獲取，不發送請求到服務器，不與服務器發生交互行爲。

其中，強緩存又分爲兩種：磁盤緩存disk cache和內存緩存memory cache

• disk cache:將資源緩存到磁盤中，等待下次訪問時不須要從新下載資源，而直接從磁盤中獲取，它的直接操做對象爲CurlCacheManager。 它與memoryCache最大的區別在於，當退出進程時，內存中的數據會被清空，而磁盤的數據不會，因此，當下次再進入該進程時，該進程仍能夠從diskCache中得到數據，而memoryCache則不行。
• memory cache:將資源緩存到內存中，等待下次訪問時不須要從新下載資源，而直接從內存中獲取。Webkit早已支持memoryCache。 目前Webkit資源分紅兩類，一類是主資源，好比HTML頁面，或者下載項，一類是派生資源，好比HTML頁面中內嵌的圖片或者腳本連接，分別對應代碼中兩個類：MainResourceLoader和SubresourceLoader。 雖然Webkit支持memoryCache，可是也只是針對派生資源，它對應的類爲CachedResource，用於保存原始數據（好比CSS，JS等），以及解碼過的圖片數據。

發送http請求時，發生了什麼

首次請求

1. 客戶端請求一個資源
2. 服務端返回資源，並在response header中加上字段cache-control/expires，Last-Modified/ETag
3. 客戶端展示該頁面，並將頁面連同header中的字段存儲 再次請求
4. 若是有cache-control/expires字段，與客戶端時間做對比，判斷緩存是否過時， 若是沒有過時，使用緩存資源，返回200(from disk cache)或200(from memory cache)，若是已過時，向服務器發送請求
5. 向服務器發送請求時，若是本地有Last-Modified/ETag字段，將上次請求的Last-Modified/Etag一塊兒傳遞給服務器，與服務器資源做對比，判斷上次請求以後資源是否有改變， 若是沒有改變，返回304和一個空的響應體，不然返回200和新的資源

靜態資源緩存的配置

與200緩存相關的字段

• Expires:絕對過時時間 設置一個絕對過時時間Date字符串, 優先級比Cache-Control低, 同時設置Expires和Cache-Control則後者生效. 這種方式有一個明顯的缺點，因爲失效時間是一個絕對時間，因此當客戶端本地時間被修改之後，服務器與客戶端時間誤差變大之後，就會致使緩存混亂。

• Cache-Control:設置相對過時時間，以秒爲單位，始終與客戶端時間相比較。

  no-cache: 數據內容不能被緩存, 每次請求都從新訪問服務器,如有max-age, 則緩存期間不訪問服務器.

  no-store: 不只不能緩存, 連暫存也不能夠(即: 臨時文件夾中不能暫存該資源)

  private(默認): 只能在瀏覽器中緩存, 只有在第一次請求的時候才訪問服務器, 如有max-age, 則緩存期間不訪問服務器

  public: 能夠被任何緩存區緩存, 如: 瀏覽器、服務器、代理服務器等

  max-age: 相對過時時間, 即以秒爲單位的緩存時間

與304緩存相關的字段：

• Etag ETag將返回給瀏覽器一個資源ID(字符串), 若是有了新版本則正常發送並附上新ID, 不然返回304. ETag是爲了解決Last-Modified只能精確到秒的問題，能夠精確到毫秒。可是在服務器集羣狀況下, 必須保證每一個分佈式服務器返回相同的ETag.

• Last-Modified: 該資源的最後修改時間, 在瀏覽器下一次請求資源時, 瀏覽器將先發送一個請求到服務器上, 並附上If-odified-Since頭來講明瀏覽器所緩存資源的最後修改時間, 若是服務器發現沒有修改, 則直接返回304(Not Modified)迴應信息給瀏覽器(內容不多), 若是服務器對比時間發現修改了, 則照常返回所請求的資源.

靜態資源緩存的實現

存儲位置

資源緩存在用戶的電腦上，瀏覽器目錄中。mac os系統，chrome瀏覽器的緩存存儲位置是：/Users/XXX/Library/Caches/Google/Chrome/Default/Cache，默認緩存文件沒有後綴名，咱們能夠手動添加後綴名

實現304緩存

效果:

實現200緩存

在服務端的nginx中配置：

現象： 以前訪問過圖片資源，關閉瀏覽器（內存清空），再次打開頁面 磁盤緩存：

在本頁面刷新：

開發環境，不想使用緩存，如何實現

在服務器中配置 cache-control:no-store,禁止靜態資源緩存

生產環境強制刷緩存策略

生產環境中，用戶以前可能有200緩存，當資源有更改的時候，因爲不能讓用戶手動清除緩存，可能出如今舊緩存有效期內，老用戶顯示緩存中內容的狀況。 解決方法：把文件名和文件內容關聯起來，好比js文件，每次修改文件內容後都關聯的修改文件名稱，強制用戶使用新的文件，不使用緩存。

CDN回源 nginx相關配置 逐級優化字段 爲什麼遞進