http 緩存小結

miguel.jiang 發布于2019-08-06 13:41 / 2704人閱讀

摘要：為了優化性能，使用緩存是一種比較常見的手段。由于篇幅原因，本篇重點講述緩存。緩存未命中達緩存的請求沒有副本可用，而被轉發給原始服務器，與緩存命中相反。協商緩存協商緩存是在用戶強緩存失敗的情況下，向服務器端進行再驗證。

為了優化性能，使用緩存是一種比較常見的手段。那么如何實現緩存以及如何避免緩存呢，都是要探討的話題。可以從三個部分：http 緩存、cookie、localStorage&sessionStorage 來重點講述緩存實現的原理、過程以及實現的方式。由于篇幅原因，本篇重點講述 http 緩存。

1.基本概念

緩存命中：使用已有的副本為到達的請求提供資源而不用從服務器中獲取資源。?
緩存未命中： 達緩存的請求沒有副本可用，而被轉發給原始服務器，與緩存命中相反。?
CHP: Cache Hit Percentage,緩存提供服務請求所占有的比例，緩存的文件個數/請求資源個數。?
下圖是打開百度資源后所請求的資源（部分）情況：

可以看到其中有兩個資源是從服務器中獲取的，其余是從緩存中獲取，那么其CHP值為：80%。

2.強緩存

所謂的強緩存是指請求資源的時候不需要發送 http 向服務器發送請求，直接從客戶端獲取資源。實現的方式是有 http 的 Expires,Cache-Control兩個response header實現的。

2.1 Expires

Expires是 http 1.0 提出的一個 header,其值是一個資源有效期的絕對時間，實現緩存的過程如下：?

瀏覽器發送請求，服務器在response 的header中加入Expires,并將資源返回給瀏覽器；?

瀏覽器獲取到資源后，會存儲一個資源的副本，并將EXpires中的時間進行保存；?

當再次進行資源請求的時候，瀏覽器會將當前的請求時間與之前存儲的時間進行比較；?

如果請求的時間在有效期之內，則直接使用副本，反之會向服務器發送資源并且重新更新資源的有效期

Expires的值為一個絕對時間，當客戶端改變了時間或者時區問題，會導致緩存失效；因此在http 1.1 中引入了Cache-Control。

Cache-Control與Expires同時存在的時候Cache-Control的優先級大于Expires

2.2 Cache-Control

Cache-Control 實現的過程與 Expires 類似，其常見的有三個值:?

max-age:?以秒為單位，表示資源緩存的相對時間。瀏覽器再次進行請求的時候，會將上次請求的時間與max-age相對時間求和，在與現在請求的時間相比較，如果在計算的時間范圍內，則緩存可用；?

no-cache:?表示資源可以進行緩存，但是在下次進行使用的時候，必須去服務器端進行再驗證。如果返回的response status 是304，那么就是從緩存中獲取資源，如果是200 則從服務器端獲取資源；?

no-store:?資源不能進行本地緩存，再次請求資源的時候，需要去服務器重新獲取資源。

Cache-Control:max-ag=0 與 Cache-Control:no-cache 在使用效果上沒有多大的區別，區別在于服務器掛了是否可以使用之前的緩存的response 即 max-age=0 可以看到之前緩存的內容，頁面正常顯示之前的內容而 no-cache 則返回錯誤5xx狀態碼

2.3 如何加入Expires與Cache-Control頭部

上面講述利用Expires與Cache-Control如何實現緩存的，那怎么樣在請求資源的時候加入這兩個header呢，有以下兩種方式：?
(1) 通過代碼的方式，在web服務器返回的響應中添加響應頭部，如在 Express 框架中使用 setHeader 加入，代碼如下：

const picMap = {
 "logo.png": "no-store",
 "avatar.png": "no-cache",
 "background.png": "max-age: 36000"
}
app.use(express.static(publicPath, setHeaders(res, filePath, stat) {
 let baseName = path.basename(filePath);
 picMap[baseName] && res.set("Cache-Control", picMap[baseName])
}));

(2) 通過配置web服務器的方式,在服務器配置文件中加入 Expires 與 Cache-Control,進行統一配置。

3.協商緩存

協商緩存是在用戶強緩存失敗的情況下，向服務器端進行再驗證。它與強緩存的區別在于會向服務器發送請求，但是不會獲取資源，瀏覽器端請求的資源還是從緩存中獲取。其實現有兩對首部：【Last-Modified，If-Modified-Since】、【ETag、If-None-Match】其中以【Last-Modified，If-Modified-Since】為例，講解實現的過程。

瀏覽器第一次請求一個資源，服務器會將資源以及資源的最后修改時間（時間放入Last-Modified）發送給瀏覽器；

瀏覽器獲取資源，將資源以及修改時間進行保存；

瀏覽器再次請求相同資源的同時，在請求的頭部加入 If-Modified-Since，其值為上一次請求保存的時間；

服務器會將資源最后修改的時間與 If-Modified-Since 相比較，如果時間一致就返回 304 狀態碼，反之則發送新的資源給服務器。

4.緩存避免

開發側
(1) 給資源加上一個動態的參數，如css/index.css?v=0.1?
(2) 如果緩存問題出現在 ajax 請求中，可以給請求地址添加隨機數；

用戶側
(1) F5:cache-control:max-age=0?
(2) Ctrl+F5:請求的時候不帶上任何緩存頭

參考文獻
[1]?《http權威指南》。?
[2]?https://www.cnblogs.com/lyzg/...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/62087.html

瀏覽器緩存小結

摘要：告知瀏覽器我希望內容來自緩存我并不關心被緩存響應是否是新鮮的。客戶端請求驗證緩存的有效性。因為最近面試經常會被問到304緩存的問題，因此在網上搜集了各種資料，小記一下緩存有瀏覽器緩存，代理服務器緩存，服務端緩存等，這里著重記一下瀏覽器緩存瀏覽器第一次像服務器發起請求時，如果有緩存，瀏覽器在返回信息里面會帶上相應的緩存策略，下面介紹一下有哪些常用的緩存策略。 Expires 過期...

raise_yang 2019-08-06 13:22 評論0 收藏0
Web站點緩存技術小結

摘要：導言本文將列舉站點常用緩存技術的基本概念與特點，為想要了解緩存技術的讀者們提供提綱式的技術介紹。這些指令指定用于阻止緩存對請求或響應造成不利干擾的行為。參考連接網站緩存技術總結高性能網站的關鍵緩存靜態資源緩存導言：本文將列舉web站點常用緩存技術的基本概念與特點，為想要了解web緩存技術的讀者們提供提綱式的技術介紹。在互聯網迅速發展的今天，一個互聯網站點的請求量是十分驚人的，動輒上...

printempw 2019-08-06 13:21 評論0 收藏0
瀏覽器緩存小結

摘要：原文鏈接瀏覽器緩存瀏覽器緩存強緩存協商緩存強緩存釋義客戶端第一次問服務器要某個資源時，服務器丟還給客戶端所請求的這個資源同時，告訴客戶端將這個資源保存在本地，并且在未來的某個時點之前如果還需要這個資源，直接從本地獲取就行了，不用向服務器請求原文鏈接:瀏覽器緩存瀏覽器緩存強緩存 & 協商緩存強緩存釋義: 客戶端第一次問服務器要某個資源時，服務器丟還給客戶端所請求的這個資源...

pepperwang 2019-08-23 13:43 評論0 收藏0
瀏覽器緩存小結

摘要：原文鏈接瀏覽器緩存瀏覽器緩存強緩存協商緩存強緩存釋義客戶端第一次問服務器要某個資源時，服務器丟還給客戶端所請求的這個資源同時，告訴客戶端將這個資源保存在本地，并且在未來的某個時點之前如果還需要這個資源，直接從本地獲取就行了，不用向服務器請求原文鏈接:瀏覽器緩存瀏覽器緩存強緩存 & 協商緩存強緩存釋義: 客戶端第一次問服務器要某個資源時，服務器丟還給客戶端所請求的這個資源...

CollinPeng 2019-08-06 13:37 評論0 收藏0
CDN小結

摘要：二目的是一個經策略性部署的整體系統，從技術上全面解決由于網絡帶寬小用戶訪問量大網點分布不均而產生的用戶訪問網站響應速度慢的根本原因。一、CDN全稱:??Content Delivery Network或Content Ddistribute Network，即內容分發網絡。 ??二、目的：??CDN是一個經策略性部署的整體系統，從技術上全面解決由于網絡帶寬小、用戶訪問量大、網點分布不...

cod7ce 2019-08-23 11:36 評論0 收藏0