資訊專欄INFORMATION COLUMN
摘要：用戶發起了一個請求后，瀏覽器發現先本地已有所請求資源的緩存，便開始檢查緩存是否過期。表明只有特定用戶才能使用緩存，適用于公共緩存服務器的情況。用戶行為最后附一張圖說明用戶行為對瀏覽器緩存的影響
參閱了一些瀏覽器緩存的資料，本文通過一張圖來歸納總結其過程。
瀏覽器第一次向一個web服務器發起http請求后，服務器會返回請求的資源，并且在響應頭中添加一些有關緩存的字段如：Cache-Control、Expires、Last-Modified、ETag、Date等等。之后瀏覽器再向該服務器請求該資源就可以視情況使用強緩存和協商緩存。
強緩存：瀏覽器直接從本地緩存中獲取數據，不與服務器進行交互。
協商緩存：瀏覽器發送請求到服務器，服務器判定是否可使用本地緩存。
聯系與區別：兩種緩存方式最終使用的都是本地緩存；前者無需與服務器交互，后者需要。
下面假定瀏覽器已經訪問了服務器，服務器返回了緩存相關的頭部字段且瀏覽器已對相關資源做好緩存。通過下圖來分析強緩存和協商緩存：
強緩存如圖紅線所示的過程代表強緩存。用戶發起了一個http請求后，瀏覽器發現先本地已有所請求資源的緩存，便開始檢查緩存是否過期。有兩個http頭部字段控制緩存的有效期：Expires和Cache-Control，瀏覽器是根據以下兩步來判定緩存是否過期的：
查看緩存是否有Cache-Control的s-maxage或max-age指令，若有，則使用響應報文生成時間Date + s-maxage/max-age獲得過期時間，再與當前時間進行對比（s-maxage適用于多用戶使用的公共緩存服務器）；
如果沒有Cache-Control的s-maxage或max-age指令，則比較Expires中的過期時間與當前時間。Expires是一個絕對時間。
注意，在HTTP/1.1中，當首部字段Cache-Control有指定s-maxage或max-age指令，比起首部字段Expires，會優先處理s-maxage或max-age。
另外下面列幾個Cache-Control的常用指令：
no-cache：含義是不使用本地緩存，需要使用協商緩存，也就是先與服務器確認緩存是否可用。
no-store：禁用緩存。
public：表明其他用戶也可使用緩存，適用于公共緩存服務器的情況。
private：表明只有特定用戶才能使用緩存，適用于公共緩存服務器的情況。
經過上述兩步判斷后，若緩存未過期，返回狀態碼為200，則直接從本地讀取緩存，這就完成了整個強緩存過程；如果緩存過期，則進入協商緩存或服務器返回新資源過程。
協商緩存當瀏覽器發現緩存過期后，緩存并不一定不能使用了，因為服務器端的資源可能仍然沒有改變，所以需要與服務器協商，讓服務器判斷本地緩存是否還能使用。此時瀏覽器會判斷緩存中是否有ETag或Last-Modified字段，如果沒有，則發起一個http請求，服務器根據請求返回資源；如果有這兩個字段，則在請求頭中添加If-None-Match字段（有ETag字段的話添加）、If-Modified-Since字段（有Last-Modified字段的話添加）。注意：如果同時發送If-None-Match 、If-Modified-Since字段，服務器只要比較If-None-Match和ETag的內容是否一致即可；如果內容一致，服務器認為緩存仍然可用，則返回狀態碼304，瀏覽器直接讀取本地緩存，這就完成了協商緩存的過程，也就是圖中的藍線；如果內容不一致，則視情況返回其他狀態碼，并返回所請求資源。下面詳細解釋下這個過程：
1.ETag和If-None-Match二者的值都是服務器為每份資源分配的唯一標識字符串。
瀏覽器請求資源，服務器會在響應報文頭中加入ETag字段。資源更新時，服務器端的ETag值也隨之更新；
瀏覽器再次請求資源時，會在請求報文頭中添加If-None-Match字段，它的值就是上次響應報文中的ETag的值；
服務器會比對ETag與If-None-Match的值是否一致，如果不一致，服務器則接受請求，返回更新后的資源；如果一致，表明資源未更新，則返回狀態碼為304的響應，可繼續使用本地緩存，要注意的是，此時響應頭會加上ETag字段，即使它沒有變化。
2.Last-Modified和If-Modified-Since二者的值都是GMT格式的時間字符串。
瀏覽器第一次向服務器請求資源后，服務器會在響應頭中加上Last-Modified字段，表明該資源最后一次的修改時間；
瀏覽器再次請求該資源時，會在請求報文頭中添加If-Modified-Since字段，它的值就是上次服務器響應報文中的Last-Modified的值；
服務器會比對Last-Modified與If-Modified-Since的值是否一致，如果不一致，服務器則接受請求，返回更新后的資源；如果一致，表明資源未更新，則返回狀態碼為304的響應，可繼續使用本地緩存，與ETag不同的是：此時響應頭中不會再添加Last-Modified字段。
3.ETag較之Last-Modified的優勢以下內容引用于：http協商緩存VS強緩存
你可能會覺得使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新，為什么還需要ETag呢？HTTP1.1中ETag的出現主要是為了解決幾個Last-Modified比較難解決的問題：
一些文件也許會周期性的更改，但是他的內容并不改變(僅僅改變的修改時間)，這個時候我們并不希望客戶端認為這個文件被修改了，而重新GET；
某些文件修改非常頻繁，比如在秒以下的時間內進行修改，(比方說1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；
某些服務器不能精確的得到文件的最后修改時間。
這時，利用ETag能夠更加準確的控制緩存，因為ETag是服務器自動生成的資源在服務器端的唯一標識符，資源每次變動，都會生成新的ETag值。Last-Modified與ETag是可以一起使用的，但服務器會優先驗證ETag。
用戶行為最后附一張圖說明用戶行為對瀏覽器緩存的影響：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/62014.html
摘要：從效率上來說，它是響應速度最快的一種緩存。緩存緩存分為強緩存和協商緩存。是指在階段存在的緩存。服務器緩存，即內容分發網絡指的是一組分布在各個地區的服務器。的核心點有兩個，一個是緩存，一個是回源。作用域和都遵循同源策略。 showImg(https://segmentfault.com/img/bVbocad?w=1297&h=1081); 1 瀏覽器緩存 瀏覽器緩存機制有四個方面，它們...
摘要：注意如果用戶一開始沒有微信授權，生成海報時又必須要用戶頭像不能使用默認的話，那就只能老老實實走之前的流程了。組件名稱終端類型微信版本觸發方法關于的調用方法相冊權限需要你提供保存相冊權限獲取相冊權限成功，給出再次點擊圖片保存到相冊的提示。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海報生成示例 海報生成速度緩慢...
摘要：導語智能手機發展到今天已經有十幾個年頭，手機的軟硬件都已經發生了翻天覆地的變化，特別是陣營，從一開始的一兩百到今天動輒，內存。恰好最近做了內存優化相關的工作，這里也對內存優化相關的知識做下總結。 導語 智能手機發展到今天已經有十幾個年頭，手機的軟硬件都已經發生了翻天覆地的變化，特別是Android陣營，從一開始的一兩百M到今天動輒4G，6G內存。然而大部分的開發者觀看下自己的異常上報系...
摘要：要搞清這三種關系指向之間的關系拗口，其實也就是要搞懂，構造函數由構造函數操作創造出的實例對象和構造函數的原型對象之間的關系。 寫在前面 這篇博客來源于，有天mentor突然傳給我了這張祖傳的圖片，并且發誓一定要給我講清楚，然鵝在他的一番激情講解之后，他自己也被繞懵了...于是后來我決定整理一下似乎還有點清晰的思路，記錄一下我對這張圖的理解。作為一個小白，對于js中這些比較復雜的概念的理...
閱讀 1348·2021-11-15 11:37
閱讀 2226·2021-09-23 11:21
閱讀 1310·2019-08-30 15:55
閱讀 2116·2019-08-30 15:55
閱讀 2826·2019-08-30 15:52
閱讀 2831·2019-08-30 11:12
閱讀 1584·2019-08-29 18:45
閱讀 1898·2019-08-29 14:04
