前端工程師應該掌握的HTTP緩存知識點

爲何要使用 HTTP 緩存

• 對於資源:

假如每次請求的請求頭和響應頭分別都是1k，請求文件大小是10k。那麼一次請求就是12k大小，n次就是(12 * n)k。

• 對於前端:

前端每次請求完畢都要從新渲染 影響用戶體驗

• 對於後端:

沒有緩存機制的話前端會頻繁的請求後端的接口。後端每次都要提供查找和下載等功能。若是請求基數比較大，服務器就會存在較大的壓力。
爲了減小網絡帶寬消耗、減小延遲與網絡阻塞，同時下降服務器壓力，提升服務器性能。

HTTP 緩存的內容是什麼

• CSS JS 圖片等 更新頻率不大的靜態文件等

HTTP 緩存頭部字段

• Cache-Control

存在於請求頭和響應頭中，是緩存控制字段
控制HTTP緩存的最高指令，緩存不緩存 它說了算

• 相關value

no-store: 不緩存
no-cache: 緩存 可是前端使用緩存前 都會請求服務器 來判斷當前的緩存資源是不是最新 只是用不過時的緩存
max-age=x(單位秒):請求緩存後的x秒內 再也不發起請求， HTTP1.1以上
s-maxage=x(單位秒):代理服務器請求源站後x秒內再也不發起請求，只對 CDN有效
public:客戶端和代理服務器(CDN)均可以緩存
private:只有客戶端能夠緩存

Expires

• 響應頭 表明資源過時時間，由服務器返回提供。可是瀏覽器端能夠修改Expires。它是HTTP1.0的屬性，在與max-age共存的狀況下，max-age的優先級較高(由於max-age是HTTP1.1的屬性)
• 場景:

1. 瀏覽器向服務器請求了一個a.js。
2. 服務器說:‘你煩不煩？ 咱們約定個時間Expires，時間還沒到就別來煩我了’。
3. 而後服務器就返回了a.js和過時時間Expires。
4. 後續瀏覽器的請求 會先比對當前時間是否以及大於了Expires過去時間。若是還沒過時 就不會發起請求 使用緩存，若是過時了 就會從新發起請求。

• 缺點:

可能時間過時了，可是從新發起請求後 發現當前資源 a.js並無發現變化。這樣就形成了 請求的浪費

• 進階:

使用 Last-Modified和 If-Modified-Since
使服務器和瀏覽器之間在 Expires的基礎上，增長一個 羣文件最新修改時間來輔助判斷是否應該使用緩存

Last-Modified / if-Modified-Since

• Last-Modified：響應頭 資源最新修改時間 由服務器告訴瀏覽器
• if-Modified-Since：請求頭 資源最新修改時間 由瀏覽器告訴服務器。和Last-Modified是成對出現的，它們兩個會共同對比來決定這個文件要不要從新發送
• 場景:

1. 瀏覽器向服務器請求了一個a.js。
2. 服務器說：’你煩不煩？ 咱們約定個時間Expires，另外再給你一個文件最新修改時間Last-Modified，到時候時間到期了，咱們就比對文件最新修改時間，對得上你就繼續使用緩存‘。
3. 而後服務器就返回了a.js和過時時間Expires和文件最新修改時間Last-Modified。
4. 後續瀏覽器請求會先對比是否超過了Expires過時時間。沒過時就不發起請求，僅使用緩存。若是過時了 瀏覽器在後續請求服務器時就會帶上文件最新修改時間If-Modified-Since。
5. 服務器收到該請求後 會將Last-Modified 和 if-Modified-Since進行比對。
6. 若是Last-Modified 和 if-Modified-Since不同，服務器就會去查找最新的a.js，同時會再次返回最新的a.js和Expires和Last-Modified。
7. 若是Last-Modified 和 if-Modified-Since同樣。服務器就會返回304 - Not-Modified，表示以前的緩存還能夠繼續使用。

• 缺點:

Expires不太穩定，瀏覽器端能夠隨意的修改 Expires。
Last-Modified只能精確到秒。在極端狀況下，假設文件在1s內發生了變更，那麼此時 Last-Modified 就沒法感知到該文件的變化，這樣瀏覽器永遠都拿不到最新的文件資源。

• 進階:

讓服務器和瀏覽器在過時時間 Expiress + 最新修改時間 Last-Modified 的基礎上，增長一個文件內容惟一對比標記 Etag和 if-None-Match。而 Expires不太穩定 再加入一個 max-age來加以代替。

Etag / if-None-Match

• Etag：響應頭，資源標識，由服務器告訴瀏覽器
• if-None-Match：請求頭，資源緩存標識，由瀏覽器告訴服務器，其實就是上次服務器給瀏覽器的 Etag。和 Etag 是一對的，它們會進行對比（用法比 if-Modified-Since 更高級一些）
• 場景:

1. 瀏覽器向服務器發起了a.js的請求
2. 服務器說:'你煩不煩？ 咱們約定個時間Expires，再給你一個max-age=60(秒)，Last-Modified也給你，另外再給你一個文件內容惟一標識符Etag'。
3. 而後服務器就返回了a.js和過時時間Expires和max-age=60,和文件最新修改時間Last-Modified和文件內容惟一標識符Etag。
4. 後續瀏覽器在max-age=60秒內，就不會再次發起新的請求而是直接使用緩存。而且此時由於有了max-age的存在，Expires已經沒用了。
5. 後續瀏覽器請求在max-age=60秒後，會攜帶上If-Modified-Since(服務器發送的Last-Modified) 和 if-None-Match(服務器發送的Etag)。
6. 服務端會比對if-None-Match和Etag，儘管此時也傳遞了If-Modified-Since，可是服務端不會再對比if-Modified-Since和Last-Modified。由於Etag的優先級大於Last-Modified。Etag更精準的解決了文件資源在1s內的變更問題。

7.服務端比對後發現，if-None-Match 和 Etag不想等。說明a.js被修改過，服務器就會返回最新的a.js和全新的Etag和max-age，也會同時返回Expires和Last-modified，雖然它倆已經沒什麼做用了。

1. 服務端經對比發現，if-None-Match與Etag相等。說明a.js沒有任何變化，返回狀態碼304告訴瀏覽器 繼續使用以前的本地緩存

• 缺點:

在 Expires和 max-age都沒有過時的狀況下，瀏覽器是沒有辦法主動知道文件資源是否變更。由於在時間未到的狀況下，瀏覽器確定使用本地的緩存資源。

• 進階:

這種問題在HTTP協議自己上來說，就很難解決了

• 1. 經過 md5 / hash 緩存

經過不緩存 html，爲靜態文件添加 md5 或者 hash 標識，來解決瀏覽器沒法跳過緩存過時時間內主動感知文件變化的問題。
只需在項目每次發佈迭代的時候，給靜態文件添加不一樣的 md5/hash 標識便可。由於文件名並不同，服務端會認爲是新的文件，全部跟各類緩存字段都沒有任何關係，也就不會存在緩存問題。

• 1. 經過 CDN 緩存

CDN 是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡，內容分發，調度等功能模塊，使用戶就近獲取所需內容，下降網絡阻塞，提升用戶訪問響應速度和命中率，有一個字段是專門給 CDN 來使用的 s-maxage=x(單位秒)

CDN 緩存的工做方式

• 第一次請求

1. 瀏覽器向服務器請求a.js資源。
2. 服務端:'a.js這個文件我給我小弟 CDN 了，之後你要這個就找 CDN 吧，別找我了。
3. 成功返回a.js給 CDN，CDN 進行緩存。同時 CDN 返回給瀏覽器，瀏覽器本身也進行了緩存'。

• 後續請求

1. 瀏覽器緩存時間過時，再次發起請求時。這時候 服務器就不會理你了。此時CDN會幫你查找該資源，同時也分幾種狀況：

1-1. CDN節點本身緩存的文件尚未過時，CDN會打回該請求。返回狀態嗎304，告訴瀏覽器 以前的緩存資源還能使用。
1-2. CDN節點本身緩存的文件已通過期了。爲了保險起見，CDN本身會發生請求到源服務器，成功拿回最新數據後，再返回給瀏覽器。