當前位置:首頁 » 網頁前端 » web緩存機制
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web緩存機制

發布時間: 2023-08-08 13:26:27

❶ WebCache web的緩存機制

1.webcache的簡單介紹

 web緩存,是一種 緩存技術 ,用於臨時存儲(緩存)的網頁文件,如HTML頁面和圖像等靜態資源,減少帶寬以及後端伺服器的壓力,通常一個WebCache也是一個 反向代理軟體 ,既可以通過緩存響應用戶的請求,當本地沒有緩存時,可以代理用戶請求至後端主機。

WebCache分為正向和反向之分,一般正向WebCache不常用,這次主要以反向WebCache為主。

2.webcache的由來

 1)由於程序具有局部性,而局部性分為: 時間局部性和空間局部性

A.時間局部性是指:在單位時間內,大部分用戶訪問的數據只是熱點數據(熱點數據指經常被訪問的數據)

B.空間局部性是指:某新聞網站突然出來一個重大新聞,此新聞會被被反復訪問。

3.webcache的變化性

  WebCache的新鮮度監測機制 :數據都是可變的,所以緩存中的內容要做新鮮度檢測.

4.緩存相關的HTTP首部:

HTTP協議提供了多個首部用以實現 頁面緩存及緩存失效 的相關功能,這其中最常用的有:

1)Expires:HTTP/1.0,用於指定某web對象的過期日期/時間,通常為GMT格式;一般不應該將此設定過長的時間,一年的長度對大多場景來說足矣;其常用於為 純靜態內容 如JavaScripts樣式表或圖片指定緩存周期;

(2)Cache-Control:為了解決HTTP/1.0中對於新鮮度控制的策略而生,通過相對時間來控制緩存使用期限;

(3)Etag:響應首部,用於在 響應報文中為某web資源定義版本標識符 ;

(4)Last-Mofified:響應首部,用於回應客戶端關於Last-Modified-Since或If-None-Match首部的請求,以通知客戶端其請求的web對象最近的修改時間;

(5)If-Modified-Since:條件式請求首部,基於 請求內容的時間戳作驗正 ,如果後端伺服器數據的時間戳未發生改變則繼續使用,反之亦然.

(6)If-None-Match:條件式請求首部; 通過Etag來跟後端伺服器進行匹配 ,如果數據的Etag未發生改變,既不匹配,則響應新數據,否則繼續使用當前數據.

(7)Vary:響應首部,原始伺服器根據請求來源的不同響應的可能會有所不同的首部,最常用的是 Vary: Accept-Encoding,用於通知緩存機制其內容看起來可能不同於用戶請求時 Accept-Encoding-header首部標識的編碼格式;

(8)Age:緩存伺服器可以發送的一個額外的響應首部,用於指定響應的有效期限;瀏覽器通常根據此 首部決定內容的緩存時長;如果響應報文首部還使用了max-age指令,那麼緩存的有效時長為 「max-age減去Age」的結果;

❷ html5新增了離線緩存機制這說法對嗎

這個不算是 新增吧。

隨著現代瀏覽器的推動,Flash放棄對移動端的支持,HTML5無疑成為當前Web前端炙手可熱的話題。各大游戲開發商、App開發商紛紛投入人力進行研究和技術儲備。相信不久的將來,HTML5會迎來一個快速發展和普及的春天。那麼,HTML5這個新一代的標准,又給我們帶來哪些緩存機制呢?

HTML5 之離線應用Manifest
我們知道,使用傳統的技術,就算是對站點的資源都實施了比較好的緩存策略,但是在斷網的情況下,是無法訪問的,因為入口的HTML頁面我們一般運維的考慮,不會對其進行緩存。HTML5的Cache Mainifest離線應用特性就能夠幫助我們構建離線也能使用的站點,所有的資源都使用瀏覽器本地緩存,當然前提是要求在聯網的情形下使用過一次站點。
如何實現離線訪問特性
實現的步驟非常簡單,主要3個步驟:
1)在伺服器上添加MIME TYPE支,讓伺服器能夠識別manifest後綴的文件
AddType text/cache-manifest manifest
2)創建一個後綴名為.manifest的文件,把需要緩存的文件按格式寫在裡面,並用注釋行標注版本
CACHE MANIFEST
# 直接緩存的文件
CACHE:
Path/to/cache.js
# version:2012-03-20
3)給 <html> 標簽加 manifest 屬性,並引用manifest文件
具體可以參考:HTML5 緩存: cache manifest
<html manifest=」path/to/name-of.manifest」>
離線應用訪問及更新流程
第一次訪問離線應用的入口頁HTML(引用了manifest文件),正常發送請求,獲取manifest文件並在本地緩存,陸續拉取manifest中的需要緩存的文件
再次訪問時,無法在線離線與否,都會直接從緩存中獲取入口頁HTML和其他緩存的文件進行展示。如果此時在線,瀏覽器會發送請求到伺服器請求manifest文件,並與第一次訪問的副本進行比對,如果發現版本不一致,會陸續發送請求重新拉取入口文件HTML和需要緩存的文件並更新本地緩存副本
之後的訪問重復第2步的行為
離線機制的緩存用途
從Manifest的機制來看,即使我們不是為了創建離線應用,也同樣可以使用這種機制用於緩存文件,可以說是給Web緩存提供多一種可以選擇的途徑。
存在的問題:緩存文件更新控制不靈活
就目前HTML5提供的manifest機制來講,一個頁面只能引用一個manifest頁面,而且一旦發現這個manifest改變了,就會把裡面所有定義的緩存文件全部重新拉取一遍,不管實際上有沒有更新,控制比較不靈活。針對這個問題,也有的同學提出了一些建議,比如把需要緩存的文件分模塊切分到不同manifest中,並分開用HTML引用,再使用強大的iframe嵌入到入口頁面,這樣就當某一個模式需要有更新,不會導致其他模塊的文件也重新拉取一遍。

HTML5 之本地存儲localstorage
HTML5給我們提供本地存儲localstorage特性,嚴格來講,其實已經不算傳統Web緩存的范疇。因為它存儲的地方是跟Web緩存分開的,是瀏覽器重新開辟的一個地方。
localstorage的作用
本地存儲localstorage的作用主要使Web頁面能夠通過瀏覽器提供的set/get介面,存儲一些自定義的信息到本地硬碟,並且在單次訪問或以後的訪問過程中隨時獲取或修改。
Localstorage的使用
Localstorage提供了幾個非常易用的Api,setItem/getItem/removeItem/clear,具體的可以參考:Html5 Step by Step(二) 本地存儲
Localstorage的緩存用途
Localstorage設計的本意可能是用來存儲一些用戶操作的個性化設置的文本類型的信息和數據,當我們其實也可能拿來當Web緩存區使用,比如我們可以將Base64格式編碼的圖片信息,存在localstorage中,再次訪問時,直接本地獲取後,使用Css3的Data:image的方式直接展現出來。
存在的問題:大小限制
按照目前標准,目前瀏覽器只給每個獨立的域名提供5m的存儲空間,當存儲超過5m,瀏覽器就會彈出警告框。

可以說,HTML5的Manifest和localstorage是給我們在考慮Web緩存的時候提供了多一種思路,當你開發的應用只面對現代瀏覽器的時候,不妨可以考慮一下

❸ 瀏覽器緩存機制

有dns的地方,就有緩存。瀏覽器、操作系統、Local DNS、根域名伺服器,它們都會對DNS結果做一定程度的緩存。

DNS查詢過程如下:

首先搜索瀏覽器自身的DNS緩存,如果存在,則域名解析到此完成。
如果瀏覽器自身的緩存裡面沒有找到對應的條目,那麼會嘗試讀取操作系統的hosts文件看是否存在對應的映射關系,如果存在,則域名解析到此完成。
如果本地hosts文件不存在映射關系,則查找本地DNS伺服器(ISP伺服器,或者自己手動設置的DNS伺服器),如果存在,域名到此解析完成。
如果本地DNS伺服器還沒找到的話,它就會向根伺服器發出請求,進行遞歸查詢。

瀏覽器本地緩存失效後,瀏覽器會向CDN邊緣節點發起請求。類似瀏覽器緩存,CDN邊緣節點也存在著一套緩存機制。CDN邊緣節點緩存策略因服務商不同而不同,但一般都會遵循http標准協議,通過http響應頭中的
Cache-control: max-age 的欄位來設置CDN邊緣節點數據緩存時間。

當瀏覽器向CDN節點請求數據時,CDN節點會判斷緩存數據是否過期,若緩存數據並沒有過期,則直接將緩存數據返回給客戶端;否則,CDN節點就會向伺服器發出回源請求,從伺服器拉取最新數據,更新本地緩存,並將最新數據返回給客戶端。 CDN服務商一般會提供基於文件後綴、目錄多個維度來指定CDN緩存時間,為用戶提供更精細化的緩存管理。

CDN 優勢
CDN節點解決了跨運營商和跨地域訪問的問題,訪問延時大大降低。
大部分請求在CDN邊緣節點完成,CDN起到了分流作用,減輕了源伺服器的負載。

http請求報文(request)
請求行
請求方法  空格  URL 空格  協議版本 回車符 換行符
請求頭(通用信息頭、請求頭、實體頭)
頭部欄位名 冒號  值  回車鍵 換行符
...
頭部欄位名 冒號  值  回車鍵 換行符
空行
回車符   換行符
實體主體(只有post請求有)
主體

http響應報文(response)
狀態行
協議版本  空格  狀態碼 空格  狀態碼描述 回車符 換行符
響應頭部
頭部欄位名 冒號  值   回車符 換行符
...
頭部欄位名 冒號  值   回車符 換行符
空行
回車符   換行符
響應正文
正文

瀏覽器初次向伺服器發起請求後拿到請求結果,會根據響應報文中HTTP頭的緩存標識,決定是否緩存返回的結果,是則將請求結果和緩存標識存入瀏覽器緩存中

瀏覽器每次發起請求,都會現在瀏覽器緩存中查找該請求的結果以及緩存標識
瀏覽器                瀏覽器緩存        伺服器

——————第一次發起http請求——————>

<——沒有該請求的緩存結果和緩存標識————

——————————————發起http請求——————————————>

<——————————返回該請求結果和緩存規則————————————

——將請求結果和緩存標識存入瀏覽器緩存——>

強制緩存就是向瀏覽器緩存查找結果,並根據該結果的緩存規則來決定是否使用該緩存結果的過程

強制緩存的情況分為三種:
1、不存在該緩存結果和緩存標識,強制緩存失效,直接向伺服器發起請求
2、存在該緩存結果和緩存標識,但結果已經失效,強制緩存失效,使用協商緩存
3、存在該緩存結果和緩存標識,且該結果沒有失效,強制緩存生效,直接返回該結果

控制強制緩存的欄位:Expires,Cache-Control

Expires 是 HTTP/1.0 控制緩存的欄位,值為伺服器返回該請求的結果緩存時間
即再次發送請求是,客戶端時間 小於 Expires的值,直接使用緩存結果

Cache-Control 是HTTP/1.1的規則,主要用於控制網頁緩存,主要取值為:
public:所有的內容都緩存(客戶端和代理伺服器都可以緩存)
private:所有內容只有客戶端可以緩存(默認值)
no-cache:客戶端緩存內容,但是是否使用緩存則需要經過協商緩存來驗證決定
no-store:即不使用強制緩存,也不使用協商緩存
max-age=xxx:緩存內容將在xxx秒後失效

Expires 是一個絕對值
Cache-Control 中 max-age 是相對值,解決了 Expires時期 服務端與客戶端 可能出現時間差的問題

註:Expires和Cache-Control同時存在時,只有Cache-Control生效

協商緩存就是強制緩存失效後,瀏覽器攜帶緩存標識向伺服器發起請求,由伺服器根據緩存標識決定是否使用緩存的過程

協商緩存的兩種情況:
1、協商緩存生效,返回304,繼續使用緩存
過程:
瀏覽器                 瀏覽器緩存     伺服器

————————發起http請求————————>

<——該請求的緩存結果失效,只返回緩存標識——

————————攜帶該資源的緩存標識,發起http請求————————>

<—————————————304,該資源無更新————————————

——————獲取該請求的緩存結果——————>

<——————返回該請求的緩存結果——————

2、協商緩存失敗,返回200和請求結果
過程:
瀏覽器                 瀏覽器緩存     伺服器

————————發起http請求————————>

<——該請求的緩存結果失效,只返回緩存標識——

————————攜帶該資源的緩存標識,發起http請求————————>

<————————200,資源已更新,重新返回請求和結果———————

——將該請求結果和緩存標識存入瀏覽器緩存中—>

協商緩存的標識也是在響應報文的HTTP頭中和請求結果一起返回給瀏覽器的

控制協商緩存的欄位:
(1) Last-Modified/If-Modified-Since:Last-Modified是伺服器響應請求是,返回該資源文件在伺服器最後被修改的時間;If-Modified-Since再次發起請求時,攜帶上次返回的Last-Modified的值,伺服器將該欄位值與該資源最後修改時間對比,決定是否用緩存
(2)Etag/If-None-Match:Etag伺服器響應請求時,返回當前資源文件的一個唯一標識,由伺服器生成之;If-None-Match是再次發起請求時,攜帶上次返回的唯一標識Etag的值,伺服器收到後,將該欄位值與該資源在伺服器上的Etag對比,一致 則返回304,否則返回200

註:Etag/If-None-Match優先順序高於Last-Modified/If-Modified-Since,同時存在時只有Etag/If-None-Match生效

瀏覽器緩存分為:內存緩存 和 硬碟緩存

內存緩存特性:
(1)快速讀取:內存緩存會將編譯解析後的文件,存入該進程的內存中,便於下次運行時快速讀取
(2)時效性:一旦關閉進程,進程內存清空

硬碟緩存特性:
永久性:直接寫入硬碟文件中
復雜、緩慢:讀取緩存對該緩存存放的硬碟文件進行I/O操作,重新解析

from memory cache:使用內存中的緩存

from disk cache:使用硬碟中的緩存

瀏覽器讀取順序:memory ——> disk

瀏覽器將js和圖片等文件解析執行後直接存入內存緩存中,F5刷新頁面時,from memory cache(使用內存中的緩存)
css文件存入硬碟中,F5刷新頁面時,from disk cache(使用硬碟中的緩存)

參考文章
https://segmentfault.com/a/1190000017962411
https://www.cnblogs.com/chengxs/p/10396066.html

❹ Web Api及MVC性能提升的幾個小技巧

一、緩存
為了避免每次請求都去訪問後台的資源,我們一般會考慮將一些更新不是很頻繁的,可以重用的數據,通過一定的方式臨時地保存起來,後續的請求根據情況可以直接訪問這些保存起來的數據,這種機制就是所謂的緩存機制。緩存分為頁面輸出緩存,內存數據緩存和緩存依賴等。從設計原則來說,易變性、敏感性的信息不適合進行緩存,同時緩存的內容也是易丟失的,在代碼中不能完全依賴於緩存的數據,需要保證在緩存的數據丟失後也能進行正確的處理。
1、頁面輸出緩存
通過對輸出的頁面進行緩存,每次新的用戶請求調用相同的 Action 時,相同的內容不需要重新創建一次而直接輸出。頁面輸出緩存的使用非常簡單,在 Action 上使用 [OutputCache] 特性標記即可生效。頁面輸出緩存可控制緩存的內容所存儲的位置,例如是在伺服器端存儲緩存的頁面內容還是在客戶端存儲緩存的頁面內容;也可使用 Duration 參數控制緩存的失效絕對時間和間隔時間,甚至能使用 VaryByParam 參數對不同的請求參數分別進行緩存。頁面輸出緩存非常適合於內容比較固定的前端頁面的緩存。
2、內存數據緩存
通常情況下,數據是保存在資料庫、磁碟文件等存儲介質中的,而應用程序訪問這些資源是一項很費時的操作。如果先將這些資源中的數據緩存到內存緩存區中,當應用程序需要這些數據時,直接從緩存區中提取,就可以減少系統開銷,顯著提高可使用的用戶並發數等。內存數據緩存需考慮緩存的內容更改失效後如何清空其他已經被緩存的相關聯的數據問題。
3、EFCache
眾所周知,NHiberate 提供了二級緩存功能。現在,如果你使用的是 Entity Framework 6 或更高版本的 Entity Framework ,你也可考慮使用 EFCache 組件來為 Entity Framework 提供二級緩存支持,其實質上也是屬於內存數據緩存。EFCache 的特點是使用上非常方便,僅需定義如下的代碼無需其他復雜的額外的配置即可實現二級緩存。如需定義特定的緩存策略,如緩存的過期時間,控制數據緩存的范圍,也僅需繼承 CachingPolicy 類並 override 其部分方法即可。你甚至可以通過實現 ICache 介面來實現自定義的緩存模型以替換默認的 InMemoryCache 。
二、Stream壓縮
對響應流進行壓縮,其作用是減少網路開銷,提高系統的響應速度。目前的瀏覽器通常都支持 gzip 和 deflate 壓縮解壓功能,因此你通常無效考慮瀏覽器的兼容性問題。啟用 gzip 和 deflate ,既可通過 IIS 配置實現,在 MVC 中也可通過編寫自定義的 ActionFilter 實現。在壓縮之前和壓縮之後 Stream 的大小差異通常都是驚人的,其壓縮率通常都在5-10倍以上。
三、js和css文件的壓縮和打包
1、js 和 css 文件的壓縮
其實質就是生成較小的文件,減小下載這些文件的網路開銷,提供系統的響應速度。壓縮 js 和 css 文件還有個好處是通常還可以起到代碼混淆的作用。在 YbSoftwareFactory 的 MVC 解決方案中,使用的是 Microsoft Ajax Minifier 組件,可在代碼編譯的過程中自動對所配置的 js 和 css 進行壓縮,基本上文件的大小都可減少一半以上
2、js、css文件的打包
其目的是進行 js 文件和 css 文件的合並,當前主流瀏覽器的並發連接數默認情況下通常都是 6 個,如果前端頁面同時請求的伺服器資源(如 img 文件、js 文件、css 文件以及各類 url 請求等)超過6個,通常就需要進行排隊下載。進行 js 文件、css 文件的打包合並,通常可以在一次請求中就完成未打包之前需多次請求才能完成的工作,通過減少前端瀏覽器的連接請求,在某種意義上也是可提高系統的響應速度的。

❺ 什麼是網站緩存就是產生html頁面嗎

轉自:http://www.fovweb.com
這是一篇知識性的文檔,主要目的是為了讓Web緩存相關概念更容易被開發者理解並應用於實際的應用環境中。為了簡要起見,某些實現方面的細節被簡化或省略了。如果你更關心細節實現則完全不必耐心看完本文,後面參考文檔和更多深入閱讀部分可能是你更需要的內容。

什麼是Web緩存,為什麼要使用它?
緩存的類型:
瀏覽器緩存;
代理伺服器緩存;
Web緩存無害嗎?為什麼要鼓勵緩存?
Web緩存如何工作:
如何控制(控制不)緩存:
HTML Meta標簽 vs. HTTP頭信息;
Pragma HTTP頭信息(為什麼不起作用);
使用Expires(過期時間)HTTP頭信息控制保鮮期;
Cache-Control(緩存控制) HTTP頭信息;
校驗參數和校驗;
創建利於緩存網站的竅門;
編寫利於緩存的腳本
常見問題解答;
緩存機制的實現:Web伺服器端配置;
緩存機制的實現:伺服器端腳本;
參考文檔和深入閱讀;
關於本文檔;

什麼是Web緩存,為什麼要使用它?Web緩存位於Web伺服器之間(1個或多個,內容源伺服器)和客戶端之間(1個或多個):緩存會根據進來的請求保存輸出內容的副本,例如html頁面, 圖片,文件(統稱為副本),然後,當下一個請求來到的時候:如果是相同的URL,緩存直接使用副本響應訪問請求,而不是向源伺服器再次發送請求。
使用緩存主要有2大理由:

減少相應延遲:因為請求從緩存伺服器(離客戶端更近)而不是源伺服器被相應,這個過程耗時更少,讓web伺服器看上去相應更快;
減少網路帶寬消耗:當副本被重用時會減低客戶端的帶寬消耗;客戶可以節省帶寬費用,控制帶寬的需求的增長並更易於管理。
緩存的類型瀏覽器緩存對於新一代的Web瀏覽器來說(例如:IE,Firefox):一般都能在設置對話框中發現關於緩存的設置,通過在你的電腦上僻處一塊硬碟空間用於存儲你已經看過的網站的副本。瀏覽器緩存根據非常簡單的規則進行工作:在同一個會話過程中(在當前瀏覽器沒有被關閉之前)會檢查一次並確定緩存的副本足夠新。這個緩存對於用戶點擊「後退」或者點擊剛訪問過的鏈接特別有用,如果你瀏覽過程中訪問到同一個圖片,這些圖片可以從瀏覽器緩存中調出而即時顯現。
代理伺服器緩存Web代理伺服器使用同樣的緩存原理,只是規模更大。代理伺服器群為成百上千用戶服務使用同樣的機制;大公司和ISP經常在他們的防火牆上架設代理緩存或者單獨的緩存設備;
由於帶路伺服器緩存並非客戶端或者源伺服器的一部分,而是位於原網路之外,請求必須路由到他們才能起作用。一個方法是手工設置你的瀏覽器:告訴瀏覽器使用那個代理,另外一個是通過中間伺服器:這個中間伺服器處理所有的web請求,並將請求轉發到後台網路,而用戶不必配置代理,甚至不必知道代理的存在;
代理伺服器緩存:是一個共享緩存,不只為一個用戶服務,經常為大量用戶使用,因此在減少相應時間和帶寬使用方面很有效:因為同一個副本會被重用多次。
網關緩存也被稱為反向代理緩存或間接代理緩存,網關緩存也是一個中間伺服器,和內網管理員部署緩存用於節省帶寬不同:網關緩存一般是網站管理員自己部署:讓他們的網站更容易擴展並獲得更好的性能;
請求有幾種方法被路由到網關緩存伺服器上:其中典型的是讓用一台或多台負載均衡伺服器從客戶端看上去是源伺服器;

❻ 前端http請求細節——Cache-Control(緩存機制)

請求和響應中的 Cache-Control 指令並不完全相同,具體可以查看 這里 ,包括指令的具體意思,這里不過多贅述。(默認值:private)

瀏覽器的緩存機制是根據 HTTP 報文的緩存標識進行的,瀏覽器第一次向伺服器發起該請求後拿到請求結果,會根據響應報文中 HTTP 頭的緩存標識,決定是否緩存結果。
瀏覽器緩存策略分為兩種:強制緩存和協商緩存。

強制緩存不會向伺服器發送請求,直接從緩存中讀取資源,可以看到請求返回的狀態碼都是200,並且 Size 代表該緩存的位置。

瀏覽器讀取緩存的順序為memory –> disk。

三級緩存原理 (訪問緩存優先順序):

在瀏覽器中,瀏覽器會在js,字體,圖片等文件解析執行後直接存入內存緩存中,那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache);而css文件則會存入硬碟文件中,所以每次渲染頁面都需要從硬碟讀取緩存(from disk cache)。

為什麼CSS會放在硬碟緩存中?
因為CSS文件載入一次就可渲染出來,我們不會頻繁讀取它,所以它不適合緩存到內存中,但是js之類的腳本卻隨時可能會執行,如果腳本在磁碟當中,我們在執行腳本的時候需要從磁碟取到內存中來,這樣IO開銷就很大了,有可能導致瀏覽器失去響應。

若伺服器的資源最後被修改時間 > If-Modified-Since的欄位值
則重新返回資源,狀態碼為200;否則則返回304,代表資源無更新,可繼續使用緩存文件

If-None-Match 的欄位值 = 該資源在伺服器的Etag值
一致則返回304,代表資源無更新,繼續使用緩存文件;不一致則重新返回資源文件,狀態碼為200。

ETag 和 Last-Modified 區別

參考鏈接:
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252