Web前后端緩存技術Web前后端緩存技術（緩存的主要作用是什么）
一、總結
一句話總結：
加快頁面打開速度
減少網絡帶寬消耗
降低服務器壓力
1、在Web應用中，應用緩存的地方有哪些？
主要有瀏覽器緩存，頁面緩存，服務器緩存，數據庫緩存等
2、服務器緩存主要分為哪兩個？
CDN緩存
Combo緩存
3、瀏覽器端緩存規則在哪里定義？
主要在HTTP協議頭和HTML的meta標簽中定義。
他們分別從新鮮度和校驗值兩個維度來規定瀏覽器是否可以直接使用緩存中的副本，還是需要去源服務器獲取更新的版本。
4、瀏覽器端緩存是否刷新的兩個關鍵是什么？
新鮮度（過期機制）：也就是緩存副本有效期。
校驗值（驗證機制）：服務器返回資源的時候有時在控制頭信息帶上這個資源的實體標簽Etag（Entity Tag），它可以用來作為瀏覽器再次請求過程的校驗標識。
新鮮度（過期機制）：也就是緩存副本有效期。一個緩存副本必須滿足以下條件，瀏覽器會認為它是有效的，足夠新的：
含有完整的過期時間控制頭信息（HTTP協議報頭），並且仍在有效期內；
瀏覽器已經使用過這個緩存副本，並且在一個會話中已經檢查過新鮮度
滿足以上兩個情況的一種，瀏覽器會直接從緩存中獲取副本並渲染。
滿足以上兩個情況的一種，瀏覽器會直接從緩存中獲取副本並渲染。
校驗值（驗證機制）：服務器返回資源的時候有時在控制頭信息帶上這個資源的實體標簽Etag（Entity Tag），它可以用來作為瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配，說明資源已經被修改或過期，瀏覽器需求重新獲取資源內容。
5、當一個用戶發起一個靜態資源請求的時候，瀏覽器會通過哪些步驟來獲取資源？
本地緩存階段：先在本地查找該資源，如果有發現該資源，而且該資源還沒有過期，就使用這一個資源，完全不會發送http請求到服務器；
協商緩存階段：如果在本地緩存找到對應的資源，但是不知道該資源是否過期或者已經過期，則發一個http請求到服務器,然后服務器判斷這個請求，如果請求的資源在服務器上沒有改動過，則返回304，讓瀏覽器使用本地找到的那個資源；
緩存失敗階段：當服務器發現請求的資源已經修改過，或者這是一個新的請求(在本來沒有找到資源)，服務器則返回該資源的數據，並且返回200， 當然這個是指找到資源的情況下，如果服務器上沒有這個資源，則返回404。
6、瀏覽器中的操作對緩存的影響？
強制刷新 – 當按下ctrl+F5來刷新頁面的時候, 瀏覽器將繞過各種緩存(本地緩存和協商緩存), 直接讓服務器返回最新的資源;
普通刷新 – 當按下F5或者點擊刷新按鈕來刷新頁面的時候,瀏覽器將繞過本地緩存來發送請求到服務器, 此時, 協商緩存是有效的
回車或轉向 – 當在地址欄上輸入回車或者按下跳轉按鈕的時候, 所有緩存都生效
7、頁面緩存是什么？
頁面緩存是將動態頁面直接生成靜態的頁面放在服務器端
頁面緩存是將動態頁面直接生成靜態的頁面放在服務器端，用戶調取相同頁面時，靜態頁面將直接下載到客戶端，不再需要通過程序的運行和數據庫的訪問，大大節約了服務器的負載。
每次訪問頁面時，會檢測相應的緩存頁面是否存在，若不存在，則連接數據庫得到數據渲染頁面並生成緩存頁面文件，這樣下次訪問的頁面文件就發揮作用了。
8、數據庫緩存是什么？
數據庫會在內存划分一個專門的區域，用來存放用戶最近執行的查詢
數據庫的緩存一般由數據庫提供，可以對表建立高速緩存。數據庫中，用戶可能多次執行相同的查詢語句，為了提高查詢效率，數據庫會在內存划分一個專門的區域，用來存放用戶最近執行的查詢，這塊區域就是緩存。
數據庫緩存的使用必須在一定的應用環境下：查詢的數據庫表不會經常變動、有大量相同的查詢(如訂單信息查詢)。
9、緩存的同步是什么，以及常用的兩種方案？
緩存的同步指的是寫命中緩存的時候，如果保持緩存與磁盤上數據一致性的問題。
直寫式WT(Write Through)：當CPU要將數據寫入內存時，除了更新緩沖內存上的數據外，也將數據寫在磁盤中以維持主存與緩沖內存的一致性，當要寫入內存的數據多起來的話,速度自然就慢了下來。
回寫式WB(Write Back)：當CPU要將數據寫入內存時，只會先更新緩沖內存上的數據，隨后再讓緩沖內存在總線不塞車的時候才把數據寫回磁盤，所以速度會快得多。
兩種方式各有利弊，直寫緩存方法利用了高速緩存中的數據始終與主存儲器中數據匹配的特點。但是，需要的總線周期卻非常耗時，從而降低性能。回寫緩存可以維持性能，因為寫入始終是在“爆發”中進行的，因而運行所需的總線周期將大大減少。
兩個CPU，或者CPU與DMA同時共享一塊物理內存時，writer在寫完后，要write back，這樣另一個reader才能看到它寫入的數據；在writer變為reader的時候，需要invalidate，否則看不到另一個 writer寫入的數據。所以在共享的時候，需要同時做writeback和invalidate。
10、與緩存相關的算法有哪些？
先進先出算法(FIFO)：如果一個數據最先進入緩存中，則應該最早淘汰掉。如果服務器接受到的數據請求與時間高度相關，可以考慮使用FIFO算法。
最不經常使用算法（LFU）：這個緩存算法使用一個計數器來記錄條目被訪問的頻率。通過使用LFU緩存算法，最低訪問數的條目首先被移除。這個方法並不經常使用，因為它無法對一個擁有最初高訪問率之后長時間沒有被訪問的條目緩存負責。
最近最少使用算法（LRU）：這個緩存算法將最近使用的條目存放到靠近緩存頂部的位置。當一個新條目被訪問時，LRU將它放置到緩存的頂部。當緩存達到極限時，較早之前訪問的條目將從緩存底部開始被移除。這里會使用到昂貴的算法，而且它需要記錄“年齡位”來精確顯示條目是何時被訪問的。此外，當一個LRU緩存算法刪除某個條目后，“年齡位”將隨其他條目發生改變。
自適應緩存替換算法(ARC)：在IBM Almaden研究中心開發，這個緩存算法同時跟蹤記錄LFU和LRU，以及驅逐緩存條目，來獲得可用緩存的最佳使用。
最近最常使用算法（MRU）：這個緩存算法最先移除最近最常使用的條目。一個MRU算法擅長處理一個條目越久，越容易被訪問的情況。
11、圖片緩存中的圖片分發是什么意思？
網站會將圖片存儲從網站中分離出來，假設一個或多個圖片服務器來存儲圖片，將圖片放到一個虛擬目錄中，而網頁上仍然用同一個URL地址指向服務器上的某一個圖片的地址。
網頁傳輸過程中，圖片會占用大量的數據量，是影響網站性能的主要因素，因此大部分網站會將圖片存儲從網站中分離出來，假設一個或多個圖片服務器來存儲圖片，將圖片放到一個虛擬目錄中，而網頁上仍然用同一個URL地址指向服務器上的某一個圖片的地址。這樣可以大大提高網站的性能。
二、Web前后端緩存技術
參考：Web前后端緩存技術
https://blog.csdn.net/yzj5208/article/details/82080868
Web緩存技術
一、緩存概述
緩存原本是一個硬件的概念：緩存就是數據交換的緩沖區（稱作Cache），當某一硬件要讀取數據時，會首先從緩存中查找需要的數據，如果找到了則直接執行，找不到的話則從內存中找。由於緩存的運行速度比內存快得多，故緩存的作用就是幫助硬件更快地運行。
在一個Web應用中，應用到緩存的地方有很多，主要有瀏覽器緩存，頁面緩存，服務器緩存，數據庫緩存等。
緩存的作用主要有：
- 加快頁面打開速度
- 減少網絡帶寬消耗
- 降低服務器壓力
二、瀏覽器緩存
瀏覽器端緩存規則主要在HTTP協議頭和HTML的meta標簽中定義。他們分別從新鮮度和校驗值兩個維度來規定瀏覽器是否可以直接使用緩存中的副本，還是需要去源服務器獲取更新的版本。
新鮮度（過期機制）：也就是緩存副本有效期。一個緩存副本必須滿足以下條件，瀏覽器會認為它是有效的，足夠新的：
- 含有完整的過期時間控制頭信息（HTTP協議報頭），並且仍在有效期內；
- 瀏覽器已經使用過這個緩存副本，並且在一個會話中已經檢查過新鮮度
- 滿足以上兩個情況的一種，瀏覽器會直接從緩存中獲取副本並渲染。
滿足以上兩個情況的一種，瀏覽器會直接從緩存中獲取副本並渲染。
校驗值（驗證機制）：服務器返回資源的時候有時在控制頭信息帶上這個資源的實體標簽Etag（Entity Tag），它可以用來作為瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配，說明資源已經被修改或過期，瀏覽器需求重新獲取資源內容。
使用HTML Meta 標簽，Web開發者可以在HTML頁面的<head>節點中加入<meta>標簽，代碼如下：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">- 1
上述代碼的作用是告訴瀏覽器當前頁面不被緩存，每次訪問都需要去服務器拉取。使用上很簡單，但只有部分瀏覽器可以支持，而且所有緩存代理服務器都不支持，因為代理不解析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 無法解決的一些問題：
1、一些文件也許會周期性的更改，但是他的內容並不改變(僅僅改變的修改時間)，這個時候我們並不希望客戶端認為這個文件被修改了，而重新GET；
2、某些文件修改非常頻繁，比如在秒以下的時間內進行修改，(比方說1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；
3、某些服務器不能精確的得到文件的最后修改時間。
其他標簽
Content-Length：盡管並沒有在緩存中明確涉及，Content-Length頭部在設置緩存策略時很重要。某些軟件如果不提前獲知內容的大小以留出足夠空間，則會拒絕緩存該內容。
Vary：緩存系統通常使用請求的主機和路徑作為存儲該資源的鍵。當判斷一個請求是否是請求同樣內容時，Vary頭部可以被用來提醒緩存系統需要注意另一個附加頭部。它通常被用來告訴緩存系統同樣注意Accept-Encoding頭部，以便緩存系統能夠區分壓縮和未壓縮的內容。
總結
瀏覽器第一次請求時:
瀏覽器再次請求時：
Question: 設置了一個月才過期的緩存，如果服務器端更新了css代碼，要怎么讓用戶更新緩存呢？
三、頁面緩存
頁面緩存是將動態頁面直接生成靜態的頁面放在服務器端，用戶調取相同頁面時，靜態頁面將直接下載到客戶端，不再需要通過程序的運行和數據庫的訪問，大大節約了服務器的負載。每次訪問頁面時，會檢測相應的緩存頁面是否存在，若不存在，則連接數據庫得到數據渲染頁面並生成緩存頁面文件，這樣下次訪問的頁面文件就發揮作用了。
MemCache的緩存策略：(visio不能用了，自己畫的，略丑慎看)
四、數據庫緩存
數據庫的緩存一般由數據庫提供，可以對表建立高速緩存。數據庫中，用戶可能多次執行相同的查詢語句，為了提高查詢效率，數據庫會在內存划分一個專門的區域，用來存放用戶最近執行的查詢，這塊區域就是緩存。
數據庫緩存的使用必須在一定的應用環境下：查詢的數據庫表不會經常變動、有大量相同的查詢(如訂單信息查詢)。
PS：這個緩存策略也可以用在前端，比如訂單信息不變的情況下，可以在前端設置一個對象，保存請求的地址、參數、結果，第一次請求時會保存請求的地址、參數和結果，再次請求時，如果請求的地址、參數一樣，則查詢該對象直接返回請求的結果。
五、緩存的同步、復制與分發
緩存的同步指的是寫命中緩存的時候，如果保持緩存與磁盤上數據一致性的問題。一般有兩種方案：
直寫式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算法擅長處理一個條目越久，越容易被訪問的情況。
應用：圖片緩存的預載與分發
圖片的預加載
為了防止圖片在需要的時候才加載，而付出的時間開銷，可以將圖片進行預加載。代碼如下：
<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>- 圖片的分發
網頁傳輸過程中，圖片會占用大量的數據量，是影響網站性能的主要因素，因此大部分網站會將圖片存儲從網站中分離出來，假設一個或多個圖片服務器來存儲圖片，將圖片放到一個虛擬目錄中，而網頁上仍然用同一個URL地址指向服務器上的某一個圖片的地址。這樣可以大大提高網站的性能。
轉自：https://blog.csdn.net/LeeSirbupt/article/details/54409931