瀏覽器緩存詳解

Gu_Yan 發布于2019-08-06 13:23 / 2625人閱讀

摘要：第一次請求了個文件再次訪問的時候如果全部重新請求非常浪費時間也很笨拙分析因為有些文件在用戶的多次請求中都是相同的如果多次請求都重復請求這個文件無疑是一種浪費那么就想到了緩存把資源緩存到本地再次請求的時候直接使用本地的緩存文件走極端把所有的文

第一次請求了 100 個文件, 再次訪問的時候,如果全部重新請求, 非常浪費時間, 也很笨拙.

分析:

 因為有些文件, 在用戶的多次請求中, 都是相同的, 如果多次請求都重復請求這個文件, 無疑是一種浪費.

那么就想到了緩存: 把資源緩存到本地, 再次請求的時候直接使用本地的緩存文件.

走極端:

 把所有的文件都緩存起來.

分析:

 這樣也不行, 因為在請求過來的 100 個文件中, 可能有一部分是長久不變的, 有一部分是隔一段時間就變的,
 還有的文件是每次都不一樣的.

那么怎么辦?

 要區分這些文件, 緩存的主動方(瀏覽器) 說: 我要知道我要不要緩存一個文件, 我要知道下次請求的時候對于
 某個文件我到底能不能直接用緩存, 還是需要重新請求.

OK.

服務器說: 那我跟你說每個文件的你要不要緩存, 什么時候不能用緩存.
然后服務器就在響應的時候, 添加一個響應頭 Expires

 類似這樣:Expires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）

瀏覽器得到這個文件之后, 先使用這個文件.
過了一會用戶重新請求了

 瀏覽器把 Expires 標記的時間 a, 和當前請求的時間 b 做個對比, 如果是這樣
      a....b  // 說明過期了, 那么就重新請求
      b....a  // 咦還沒過期, 還能吃

與 Expires 有同樣功能的還有 Cache-Control, Parama 等響應頭
Cache-Control 是 HTTP 1.1 提出的, Expires 是 HTTP 1.0 提出的, 前者比后者優先級高--在同時使用的時候.

...

然后, 瀏覽器發現不對, 這個文件過期了, 我重新拿過來的怎么還是和過期的一樣, 你丫騙我.
服務器說: 那我能怎么辦, 你又要過期時間, 還不能不給, 那哪能每個文件的過期時間我都能精確算出來, 那個文件明明我覺得
它經常變, 誰知道它一直都不變.

OK.

服務器給出了個解決方案:

 你看這樣, 我呢, 把每個文件算出來一個值, 只要文件變化了, 這個值就會改變. 然后把這個值扔給你。
 你如果發現緩存過期了, 請求的時候把這個值也給我.
 我來看看這個值和我這邊的值是不是一樣的
 如果是一樣的, 那么說明這個文件沒有變對不對, 那我就不給你文件了,給你一個 304 你再繼續使用緩存文件

這個值使用 Etag 來標記,
客戶端在緩存過期重新請求的時候, 加上一個頭 If-None-Match:(Etag的值)
OK.

服務器又說了, 哎這樣的話我還想到另外一種方案

 我給你文件的時候標記一下這個文件最后修改的時間, 你要是發現緩存過期了, 重新請求的時候把這個時間給我
 我比較一下我這邊記錄的最新的文件更改時間, 如果兩個相同不就說明文件沒改, 對不對.

服務器給客戶端的時間叫: Last-Modified
客戶端返回過來的是: If-Modified-Since(Last-Modified 的值)

云服務器 GPU云服務器瀏覽器緩存清除瀏覽器緩存 cdn瀏覽器緩存 webrtc瀏覽器接收緩存

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

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

[面試專題]Web緩存詳解

摘要：緩存詳解標簽空格分隔緩存緩存之于性能優化請求更快通過將內容緩存在本地瀏覽器或距離最近的緩存服務器如，在不影響網站交互的前提下可以大大加快網站加載速度。強制緩存不發請求到服務器，協商緩存會發請求到服務器。參考瀏覽器協議緩存機制詳解 Web緩存詳解標簽（空格分隔）：緩存緩存之于性能優化請求更快：通過將內容緩存在本地瀏覽器或距離最近的緩存服務器（如CDN），在不影響網站交互的前提...

bladefury 2019-08-01 17:30 評論0 收藏0
[面試專題]Web緩存詳解

摘要：緩存詳解標簽空格分隔緩存緩存之于性能優化請求更快通過將內容緩存在本地瀏覽器或距離最近的緩存服務器如，在不影響網站交互的前提下可以大大加快網站加載速度。強制緩存不發請求到服務器，協商緩存會發請求到服務器。參考瀏覽器協議緩存機制詳解 Web緩存詳解標簽（空格分隔）：緩存緩存之于性能優化請求更快：通過將內容緩存在本地瀏覽器或距離最近的緩存服務器（如CDN），在不影響網站交互的前提...

Tikitoo 2019-08-20 19:00 評論0 收藏0
詳解web緩存

摘要：指示對于單個用戶的整個或部分響應消息，不能被共享緩存處理。參考文章瀏覽器協議緩存機制詳解的實現原理寫給后端程序員的緩存原理介紹說說web緩存網上關于WEB緩存的文章很多，今天匯總一下。為什么要用緩存一般針對靜態資源如CSS,JS,圖片等使用緩存，原因如下：請求更快：通過將內容緩存在本地瀏覽器或距離最近的緩存服務器（如CDN），在不影響網站交互的前提下可以大大加快網站加載速度...

ACb0y 2019-08-06 13:18 評論0 收藏0
網站緩存詳解

摘要：認識緩存緩存原意是指可以進行高速數據交換的存儲器。命中率指請求緩存次數與緩存返回正確結果次數的比例。如果相同，緩存直接使用副本相應訪問，而不用向服務器發送請求緩存內容應用情形有完整的過期時間和壽命控制頭，并且沒過期。 1. 認識緩存緩存：原意是指可以進行高速數據交換的存儲器。當cpu處理數據時，先到cache中尋找，如果數據已經讀取，就不需要去RAM中讀取了在web開發中，緩存主要...

Ethan815 2019-08-06 13:32 評論0 收藏0
網站緩存詳解

摘要：認識緩存緩存原意是指可以進行高速數據交換的存儲器。命中率指請求緩存次數與緩存返回正確結果次數的比例。如果相同，緩存直接使用副本相應訪問，而不用向服務器發送請求緩存內容應用情形有完整的過期時間和壽命控制頭，并且沒過期。 1. 認識緩存緩存：原意是指可以進行高速數據交換的存儲器。當cpu處理數據時，先到cache中尋找，如果數據已經讀取，就不需要去RAM中讀取了在web開發中，緩存主要...

W_BinaryTree 2019-05-29 17:50 評論0 收藏0