Web先後端緩存技術（緩存的主要做用是什麼）

時間 2019-12-01

標籤 web 後端緩存技術主要什麼欄目 HTML 简体版

原文原文鏈接

Web先後端緩存技術Web先後端緩存技術（緩存的主要做用是什麼）

1、總結

一句話總結：

加快頁面打開速度

減小網絡帶寬消耗

下降服務器壓力

一、在Web應用中，應用緩存的地方有哪些？

主要有瀏覽器緩存，頁面緩存，服務器緩存，數據庫緩存等

二、服務器緩存主要分爲哪兩個？

CDN緩存

Combo緩存

三、瀏覽器端緩存規則在哪裏定義？

主要在HTTP協議頭和HTML的meta標籤中定義。

他們分別重新鮮度和校驗值兩個維度來規定瀏覽器是否能夠直接使用緩存中的副本，仍是須要去源服務器獲取更新的版本。css

四、瀏覽器端緩存是否刷新的兩個關鍵是什麼？

新鮮度（過時機制）：也就是緩存副本有效期。

校驗值（驗證機制）：服務器返回資源的時候有時在控制頭信息帶上這個資源的實體標籤Etag（Entity Tag），它能夠用來做爲瀏覽器再次請求過程的校驗標識。

新鮮度（過時機制）：也就是緩存副本有效期。一個緩存副本必須知足如下條件，瀏覽器會認爲它是有效的，足夠新的：
    含有完整的過時時間控制頭信息（HTTP協議報頭），而且仍在有效期內；
    瀏覽器已經使用過這個緩存副本，而且在一個會話中已經檢查過新鮮度
    知足以上兩個狀況的一種，瀏覽器會直接從緩存中獲取副本並渲染。

知足以上兩個狀況的一種，瀏覽器會直接從緩存中獲取副本並渲染。

校驗值（驗證機制）：服務器返回資源的時候有時在控制頭信息帶上這個資源的實體標籤Etag（Entity Tag），它能夠用來做爲瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配，說明資源已經被修改或過時，瀏覽器需求從新獲取資源內容。

html

五、當一個用戶發起一個靜態資源請求的時候，瀏覽器會經過哪些步驟來獲取資源？

本地緩存階段：先在本地查找該資源，若是有發現該資源，並且該資源尚未過時，就使用這一個資源，徹底不會發送http請求到服務器；

協商緩存階段：若是在本地緩存找到對應的資源，可是不知道該資源是否過時或者已通過期，則發一個http請求到服務器,而後服務器判斷這個請求，若是請求的資源在服務器上沒有改動過，則返回304，讓瀏覽器使用本地找到的那個資源；

緩存失敗階段：當服務器發現請求的資源已經修改過，或者這是一個新的請求(在原本沒有找到資源)，服務器則返回該資源的數據，而且返回200，固然這個是指找到資源的狀況下，若是服務器上沒有這個資源，則返回404。

六、瀏覽器中的操做對緩存的影響？

強制刷新 – 當按下ctrl+F5來刷新頁面的時候, 瀏覽器將繞過各類緩存(本地緩存和協商緩存), 直接讓服務器返回最新的資源;

普通刷新 – 當按下F5或者點擊刷新按鈕來刷新頁面的時候,瀏覽器將繞過本地緩存來發送請求到服務器, 此時, 協商緩存是有效的

回車或轉向 – 當在地址欄上輸入回車或者按下跳轉按鈕的時候, 全部緩存都生效

七、頁面緩存是什麼？

頁面緩存是將動態頁面直接生成靜態的頁面放在服務器端

頁面緩存是將動態頁面直接生成靜態的頁面放在服務器端，用戶調取相同頁面時，靜態頁面將直接下載到客戶端，再也不須要經過程序的運行和數據庫的訪問，大大節約了服務器的負載。
每次訪問頁面時，會檢測相應的緩存頁面是否存在，若不存在，則鏈接數據庫獲得數據渲染頁面並生成緩存頁面文件，這樣下次訪問的頁面文件就發揮做用了。前端

八、數據庫緩存是什麼？

數據庫會在內存劃分一個專門的區域，用來存放用戶最近執行的查詢

數據庫的緩存通常由數據庫提供，能夠對錶創建高速緩存。數據庫中，用戶可能屢次執行相同的查詢語句，爲了提升查詢效率，數據庫會在內存劃分一個專門的區域，用來存放用戶最近執行的查詢，這塊區域就是緩存。
數據庫緩存的使用必須在必定的應用環境下：查詢的數據庫表不會常常變更、有大量相同的查詢(如訂單信息查詢)。web

九、緩存的同步是什麼，以及經常使用的兩種方案？

緩存的同步指的是寫命中緩存的時候，若是保持緩存與磁盤上數據一致性的問題。

直寫式WT(Write Through)：當CPU要將數據寫入內存時，除了更新緩衝內存上的數據外，也將數據寫在磁盤中以維持主存與緩衝內存的一致性，當要寫入內存的數據多起來的話,速度天然就慢了下來。

回寫式WB(Write Back)：當CPU要將數據寫入內存時，只會先更新緩衝內存上的數據，隨後再讓緩衝內存在總線不塞車的時候才把數據寫回磁盤，因此速度會快得多。

兩種方式各有利弊，直寫緩存方法利用了高速緩存中的數據始終與主存儲器中數據匹配的特色。可是，須要的總線週期卻很是耗時，從而下降性能。回寫緩存能夠維持性能，由於寫入始終是在「爆發」中進行的，於是運行所需的總線週期將大大減小。
兩個CPU，或者CPU與DMA同時共享一塊物理內存時，writer在寫完後，要write back，這樣另外一個reader才能看到它寫入的數據；在writer變爲reader的時候，須要invalidate，不然看不到另外一個 writer寫入的數據。因此在共享的時候，須要同時作writeback和invalidate。算法

十、與緩存相關的算法有哪些？

先進先出算法(FIFO)：若是一個數據最早進入緩存中，則應該最先淘汰掉。若是服務器接受到的數據請求與時間高度相關，能夠考慮使用FIFO算法。

最不常用算法（LFU）：這個緩存算法使用一個計數器來記錄條目被訪問的頻率。經過使用LFU緩存算法，最低訪問數的條目首先被移除。這個方法並不常用，由於它沒法對一個擁有最初高訪問率以後長時間沒有被訪問的條目緩存負責。

最近最少使用算法（LRU）：這個緩存算法將最近使用的條目存放到靠近緩存頂部的位置。當一個新條目被訪問時，LRU將它放置到緩存的頂部。當緩存達到極限時，較早以前訪問的條目將從緩存底部開始被移除。這裏會使用到昂貴的算法，並且它須要記錄「年齡位」來精確顯示條目是什麼時候被訪問的。此外，當一個LRU緩存算法刪除某個條目後，「年齡位」將隨其餘條目發生改變。

自適應緩存替換算法(ARC)：在IBM Almaden研究中心開發，這個緩存算法同時跟蹤記錄LFU和LRU，以及驅逐緩存條目，來得到可用緩存的最佳使用。

最近最常使用算法（MRU）：這個緩存算法最早移除最近最常使用的條目。一個MRU算法擅長處理一個條目越久，越容易被訪問的狀況。

十一、圖片緩存中的圖片分發是什麼意思？

網站會將圖片存儲從網站中分離出來，假設一個或多個圖片服務器來存儲圖片，將圖片放到一個虛擬目錄中，而網頁上仍然用同一個URL地址指向服務器上的某一個圖片的地址。

網頁傳輸過程當中，圖片會佔用大量的數據量，是影響網站性能的主要因素，所以大部分網站會將圖片存儲從網站中分離出來，假設一個或多個圖片服務器來存儲圖片，將圖片放到一個虛擬目錄中，而網頁上仍然用同一個URL地址指向服務器上的某一個圖片的地址。這樣能夠大大提升網站的性能。數據庫

2、Web先後端緩存技術

參考：Web先後端緩存技術
https://blog.csdn.net/yzj5208/article/details/82080868後端

Web緩存技術

1、緩存概述

緩存本來是一個硬件的概念：緩存就是數據交換的緩衝區（稱做Cache），當某一硬件要讀取數據時，會首先從緩存中查找須要的數據，若是找到了則直接執行，找不到的話則從內存中找。因爲緩存的運行速度比內存快得多，故緩存的做用就是幫助硬件更快地運行。瀏覽器

在一個Web應用中，應用到緩存的地方有不少，主要有瀏覽器緩存，頁面緩存，服務器緩存，數據庫緩存等。緩存

緩存的做用主要有：服務器

加快頁面打開速度
減小網絡帶寬消耗
下降服務器壓力

2、瀏覽器緩存

瀏覽器端緩存規則主要在HTTP協議頭和HTML的meta標籤中定義。他們分別重新鮮度和校驗值兩個維度來規定瀏覽器是否能夠直接使用緩存中的副本，仍是須要去源服務器獲取更新的版本。

新鮮度（過時機制）：也就是緩存副本有效期。一個緩存副本必須知足如下條件，瀏覽器會認爲它是有效的，足夠新的：

含有完整的過時時間控制頭信息（HTTP協議報頭），而且仍在有效期內；
瀏覽器已經使用過這個緩存副本，而且在一個會話中已經檢查過新鮮度
知足以上兩個狀況的一種，瀏覽器會直接從緩存中獲取副本並渲染。

知足以上兩個狀況的一種，瀏覽器會直接從緩存中獲取副本並渲染。

校驗值（驗證機制）：服務器返回資源的時候有時在控制頭信息帶上這個資源的實體標籤Etag（Entity Tag），它能夠用來做爲瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配，說明資源已經被修改或過時，瀏覽器需求從新獲取資源內容。

使用HTML Meta 標籤，Web開發者能夠在HTML頁面的<head>節點中加入<meta>標籤，代碼以下：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代碼的做用是告訴瀏覽器當前頁面不被緩存，每次訪問都須要去服務器拉取。使用上很簡單，但只有部分瀏覽器能夠支持，並且全部緩存代理服務器都不支持，由於代理不解析HTML內容自己。而普遍應用的仍是 HTTP頭信息來控制緩存。

在HTTP請求和響應的消息報頭中，常見的與緩存有關的消息報頭有：

HTTP緩存機制

緩存行爲主要由緩存策略決定，而緩存策略由內容擁有者設置。這些策略主要經過特定的HTTP頭部來清晰地表達。

當一個用戶發起一個靜態資源請求的時候，瀏覽器會經過如下幾步來獲取資源：

本地緩存階段：先在本地查找該資源，若是有發現該資源，並且該資源尚未過時，就使用這一個資源，徹底不會發送http請求到服務器；
協商緩存階段：若是在本地緩存找到對應的資源，可是不知道該資源是否過時或者已通過期，則發一個http請求到服務器,而後服務器判斷這個請求，若是請求的資源在服務器上沒有改動過，則返回304，讓瀏覽器使用本地找到的那個資源；
緩存失敗階段：當服務器發現請求的資源已經修改過，或者這是一個新的請求(在原本沒有找到資源)，服務器則返回該資源的數據，而且返回200，固然這個是指找到資源的狀況下，若是服務器上沒有這個資源，則返回404。

用戶操做行爲與緩存的關係

瀏覽器中的操做對緩存的影響:

強制刷新 – 當按下ctrl+F5來刷新頁面的時候, 瀏覽器將繞過各類緩存(本地緩存和協商緩存), 直接讓服務器返回最新的資源;
普通刷新 – 當按下F5或者點擊刷新按鈕來刷新頁面的時候,瀏覽器將繞過本地緩存來發送請求到服務器, 此時, 協商緩存是有效的
回車或轉向 – 當在地址欄上輸入回車或者按下跳轉按鈕的時候, 全部緩存都生效

本地緩存階段

Expires

指定緩存到期GMT的絕對時間，若是設了max-age，max-age就會覆蓋expires。若是expires到期須要從新請求。

Cache-Control

Cache-Control是http 1.1中爲了彌補 Expires 缺陷新加入的。對已緩存的內容進行控制：

Cache-control: public表示緩存的版本能夠被代理服務器或者其餘中間服務器識別。
Cache-control: private意味着這個文件對不一樣的用戶是不一樣的。只有用戶本身的瀏覽器可以進行緩存，公共的代理服務器不容許緩存。
Cache-control: no-cache意味着文件的內容不該當被緩存。這在搜索或者翻頁結果中很是有用，由於一樣的URL，對應的內容會發生變化。

其餘相關控制字段

max-age: 指定緩存過時的相對時間秒數，max-ag=0或者是負值，瀏覽器會在對應的緩存中把Expires設置爲1970-01-01 08:00:00。
s-maxage: 相似於max-age，只用在共享緩存上，好比proxy。
public: 一般狀況下須要http身份驗證的狀況，響應是不可cahce的，加上public可使它被cache。
no-cache: 強制瀏覽器在使用cache拷貝以前先提交一個http請求到源服務器進行確認。這對身份驗證來講是很是有用的,能比較好的遵照 (能夠結合public進行考慮)。它對維持一個資源老是最新的也頗有用，與此同時還不徹底喪失cache帶來的好處)，由於它在本地是有拷貝的，可是在用以前都進行了確認，這樣http請求並未減小，但可能會減小一個響應體。
no-store: 告訴瀏覽器在任何狀況下都不要進行cache，不在本地保留拷貝。
must-revalidate: 強制瀏覽器嚴格遵照你設置的cache規則。
proxy-revalidate: 強制proxy嚴格遵照你設置的cache規則。
cache：使用本地緩存，不發生請求。

用法舉例: Cache-Control: max-age=3600, must-revalidate

協商緩存階段

Last-Modified & if-modified-since

Last-Modified與If-Modified-Since是一對報文頭，屬於http 1.0。
last-modified是WEB服務器認爲對象的最後修改時間，好比文件的最後修改時間，動態頁面的最後產生時間。

ETag & If-None-Match

ETag與If-None-Match是一對報文，屬於http 1.1。

ETag能夠用來解決這種問題。ETag是一個文件的惟一標誌符。就像一個哈希或者指紋，每一個文件都有一個單獨的標誌，只要這個文件發生了改變，這個標誌就會發生變化。

ETag機制相似於樂觀鎖機制，若是請求報文的ETag與服務器的不一致，則表示該資源已經被修改過，須要發最新的內容給瀏覽器。

同時使用這兩個報文頭，在徹底匹配If-Modified-Since和If-None-Match即檢查完修改時間和Etag以後，如都與服務器的相符，服務器返回304，不然，發送最新內容給瀏覽器。

Etag/lastModified過程以下：

客戶端請求一個頁面（A）。
服務器返回頁面A，並在給A加上一個Last-Modified/ETag。
客戶端展示該頁面，並將頁面連同Last-Modified/ETag一塊兒緩存。
客戶再次請求頁面A，並將上次請求時服務器返回的Last-Modified/ETag一塊兒傳遞給服務器。
服務器檢查該Last-Modified或ETag，並判斷出該頁面自上次客戶端請求以後還未被修改，直接返回響應304和一個空的響應體。

304：經過If-Modified-Since If-Match判斷資源是否修改，如未修改則返回304，發生了一次請求，但請求內容長度爲0，節省了帶寬。若是有多臺負載均衡的服務器，不一樣服務器計算出的Etag可能不一樣，這樣就會形成資源的重複加載。

Etag 主要爲了解決 Last-Modified 沒法解決的一些問題：

一、一些文件也許會週期性的更改，可是他的內容並不改變(僅僅改變的修改時間)，這個時候咱們並不但願客戶端認爲這個文件被修改了，而從新GET；

二、某些文件修改很是頻繁，好比在秒如下的時間內進行修改，(比方說1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改沒法判斷(或者說UNIX記錄MTIME只能精確到秒)；

三、某些服務器不能精確的獲得文件的最後修改時間。

其餘標籤

Content-Length：儘管並無在緩存中明確涉及，Content-Length頭部在設置緩存策略時很重要。某些軟件若是不提早獲知內容的大小以留出足夠空間，則會拒絕緩存該內容。

Vary：緩存系統一般使用請求的主機和路徑做爲存儲該資源的鍵。當判斷一個請求是不是請求一樣內容時，Vary頭部能夠被用來提醒緩存系統須要注意另外一個附加頭部。它一般被用來告訴緩存系統一樣注意Accept-Encoding頭部，以便緩存系統可以區分壓縮和未壓縮的內容。

總結

瀏覽器第一次請求時:

瀏覽器再次請求時：

Question: 設置了一個月才過時的緩存，若是服務器端更新了css代碼，要怎麼讓用戶更新緩存呢？

3、頁面緩存

頁面緩存是將動態頁面直接生成靜態的頁面放在服務器端，用戶調取相同頁面時，靜態頁面將直接下載到客戶端，再也不須要經過程序的運行和數據庫的訪問，大大節約了服務器的負載。每次訪問頁面時，會檢測相應的緩存頁面是否存在，若不存在，則鏈接數據庫獲得數據渲染頁面並生成緩存頁面文件，這樣下次訪問的頁面文件就發揮做用了。

MemCache的緩存策略：(visio不能用了，本身畫的，略醜慎看)

4、數據庫緩存

數據庫的緩存通常由數據庫提供，能夠對錶創建高速緩存。數據庫中，用戶可能屢次執行相同的查詢語句，爲了提升查詢效率，數據庫會在內存劃分一個專門的區域，用來存放用戶最近執行的查詢，這塊區域就是緩存。

數據庫緩存的使用必須在必定的應用環境下：查詢的數據庫表不會常常變更、有大量相同的查詢(如訂單信息查詢)。

PS：這個緩存策略也能夠用在前端，好比訂單信息不變的狀況下，能夠在前端設置一個對象，保存請求的地址、參數、結果，第一次請求時會保存請求的地址、參數和結果，再次請求時，若是請求的地址、參數同樣，則查詢該對象直接返回請求的結果。

5、緩存的同步、複製與分發

緩存的同步指的是寫命中緩存的時候，若是保持緩存與磁盤上數據一致性的問題。通常有兩種方案：

直寫式WT(Write Through)：當CPU要將數據寫入內存時，除了更新緩衝內存上的數據外，也將數據寫在磁盤中以維持主存與緩衝內存的一致性，當要寫入內存的數據多起來的話,速度天然就慢了下來。
回寫式WB(Write Back)：當CPU要將數據寫入內存時，只會先更新緩衝內存上的數據，隨後再讓緩衝內存在總線不塞車的時候才把數據寫回磁盤，因此速度會快得多。

6、與緩存相關的算法

先進先出算法(FIFO)：若是一個數據最早進入緩存中，則應該最先淘汰掉。若是服務器接受到的數據請求與時間高度相關，能夠考慮使用FIFO算法。
最不常用算法（LFU）：這個緩存算法使用一個計數器來記錄條目被訪問的頻率。經過使用LFU緩存算法，最低訪問數的條目首先被移除。這個方法並不常用，由於它沒法對一個擁有最初高訪問率以後長時間沒有被訪問的條目緩存負責。
最近最少使用算法（LRU）：這個緩存算法將最近使用的條目存放到靠近緩存頂部的位置。當一個新條目被訪問時，LRU將它放置到緩存的頂部。當緩存達到極限時，較早以前訪問的條目將從緩存底部開始被移除。這裏會使用到昂貴的算法，並且它須要記錄「年齡位」來精確顯示條目是什麼時候被訪問的。此外，當一個LRU緩存算法刪除某個條目後，「年齡位」將隨其餘條目發生改變。
自適應緩存替換算法(ARC)：在IBM Almaden研究中心開發，這個緩存算法同時跟蹤記錄LFU和LRU，以及驅逐緩存條目，來得到可用緩存的最佳使用。
最近最常使用算法（MRU）：這個緩存算法最早移除最近最常使用的條目。一個MRU算法擅長處理一個條目越久，越容易被訪問的狀況。

應用：圖片緩存的預載與分發

圖片的預加載

爲了防止圖片在須要的時候才加載，而付出的時間開銷，能夠將圖片進行預加載。代碼以下：

<html>
<script>
    var img = new Image();
    image.src = "b.jpg";
</script>
<body>
    <img src="a.jpg" alt="pic" onmouseover="this.src='b.jpg'">
</body>
</html>