1. 網站緩存功能是什麼意思
提前下載後儲存在本地硬碟中
緩存的最根本的目的是為了提高網站性能,減輕頻繁訪問數據而給資料庫帶來的壓力.再進一步,合理的緩存了某種數據形式,還會減輕程序運算時,對CPU帶來的壓力.首先,我們要知道一個最基本的效率規則,操作內存中的數據比操作存放在硬碟上的數據是要快N個數量級的.操作簡單的文本結構的數據比操作資料庫中的數據快N個數量級.
目前緩存的做法分為兩種模式:
第一種模式是內存緩存,緩存數據存放在伺服器的內存空間中,這種模式的效率是最高的.這里要注意的是:每一個伺服器的資源都是有限的,盲目的把所有數據都加在到內存中,將可能會導致伺服器資源佔用過多,而造成Web服務失敗.
第二種模式就是文件緩存,緩存數據存放在伺服器的硬碟空間中.存放格式有很多種類,如:文本格式,XML格式,二進制格式等等.這里要注意的是,伺服器I/O的處理能力有限,當一次性讀取過大數據時(>1M),它並沒有想像中那麼的高效.這個時候就需要你有一個合理的文件結構來解決了.但這已經不在我們本次要講敘的內容範圍內了.
2. 前端緩存的理解 或者 前端數據持久化的理解(強制緩存、協商緩存)
緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，並且由於 緩存文件可以重復利用 ，還可以減少帶寬，降低網路負荷。
對於一個數據請求來說，可以分為發起 網路請求、後端處理、瀏覽器響應 三個步驟。瀏覽器緩存可以幫助我們在第一和第三步驟中優化性能。比如說直接使用緩存而不發起請求，或者發起了請求但後端存儲的數據和前端一致，那麼就沒有必要再將數據回傳回來，這樣就減少了響應數據。
①不存在該緩存結果和緩存標識，強制緩存失效，則直接向伺服器發起請求
②存在該緩存結果和緩存標識，但該結果已失效，強制緩存失效，則使用協商緩存
③存在該緩存結果和緩存標識，且該結果尚未失效，強制緩存生效，直接返回該結果
控制強制緩存的欄位分別是Expires和Cache-Control，其中Cache-Control優先順序比Expires高。
Cache-Control、Expires都是緩存到期時間，Cache-Control是相對值，Expires是絕對值，即再次發送請求時，如果時間沒到期，強制緩存生效。
註：在無法確定客戶端的時間是否與服務端的時間同步的情況下，Cache-Control相比於expires是更好的選擇，所以同時存在時，只有Cache-Control生效。
①協商緩存生效，返回304
②協商緩存失效，返回200和請求結果
這里我們以博客的請求為例，狀態碼為灰色的請求則代表使用了強制緩存，請求對應的Size值則代表該緩存存放的位置，分別為from memory cache 和 from disk cache。那麼from memory cache 和 from disk cache又分別代表的是什麼呢？什麼時候會使用from disk cache，什麼時候會使用from memory cache呢？
from memory cache代表使用 內存中的緩存 ，from disk cache則代表使用的是 硬碟中的緩存 ，
3. 修改JS代碼 為什麼客戶端需要刪除緩存 才能生效
因為網速問題，瀏覽器不能每次打開一個頁面都從新獲取頁面中的js，css,圖片之類的資源。因為大部分頁面被修改的頻率不大。這樣就可以在網路條件比較差的情況下流暢打開之前的頁面。
如果需要瀏覽器不做緩存，可以在header里寫一些信息(沒測試過，直接粘的網上的代碼)
<metahttp-equiv="Expires"content="0">
<metahttp-equiv="Pragma"content="no-cache">
<metahttp-equiv="Cache-control"content="no-cache">
<metahttp-equiv="Cache"content="no-cache">
動態載入js文件，在js資源url後加隨機數
<script>
document.write("<scripttype='text/javascript'src='/js/test.js?"+Math.random();+"'></script>");
</script>
4. 瀏覽器緩存機制
有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
5. h5緩存處理方法
緩存的目的:保證每個頁面刷新後都能夠正常顯示，不是為了做全局狀態共享
有些人錯誤的使用緩存去做全局狀態共享，這個是低效的。不過可以針對要緩存的信息，也可能是需要全局狀態共享的，這個時候要注意內存和緩存里的信息保持一致。
例如token一般是全局狀態共享的，同時也要緩存下來，方便刷新後免登陸。
要緩存哪些信息:恢復頁面ui需要的最小信息,可以從路由頁面維度，去思考每個頁面需要緩存哪些信息才能保證用戶刷新頁面後能夠正常顯示頁面；
緩存要注意的問題
1.緩存在前，使用在後，有時候不注意，會發生沒有被緩存，就去被使用了。
分析最小緩存信息，每個頁面的最小緩存信息
有這個id就可以獲取到整個頁面的信息
url帶參數 方便刷新不丟失信息
內存緩存
6. java如何將頁面每次請求獲得的數據緩存起來供使用
?閼飧齪誦牡牡胤劍?褪莂ction這兒不去查資料庫，而拿到緩存的數據再直接返回到前台嘛。核心代碼邏輯就是：longobsoleteTime=1天;
List
list=cache.get(abc,
obsoleteTime);if(list==null){
list=manager.search(..);
這樣的緩存策略很多的啊。比如oscache就可以達到要求，而且用起來很簡單，只要一個jar，自己抽象一個cache的介面，套上去，就能用了。
7. vue頁面緩存設置，動態設置頁面緩存
情景：A頁面—>B頁面—>C頁面，A頁面去B頁面期望B頁面不緩存，B頁面去C頁面時，期望B頁面可以被緩存。（實際場景可以是：A為首頁，B為列表頁，C為詳情頁，B滾動翻頁後，從C返回B，記錄滾動位置。）
通過路由訪問鉤子設置B頁面的keepAlive為true或者false。
離開路由後，判斷to.name是否是A的路由名，是的話設置為false,否則設置為true。注意B頁面的keepAlive要設置為true。
2.通過vuex結合路由的includes功能以及路由鉤子函數實現。（推薦，實現起來優雅）
3.聲明一個初始化頁面狀態，內部變數的函數，從a 頁面進入執行初始化函數，其餘情況不執行。視圖依賴數據驅動，所以可以實現效果。
8. 瀏覽器中的緩存
在我們使用瀏覽器訪問網頁的過程中，瀏覽器經常會緩存各種網頁中的內容。當再次訪問同一個網頁時，可以發現部分內容是從緩存直接讀取的。
查看HTTP的響應信息，就能發現一些端倪。比如響應 200 from cache； 304 not modify 等等。
下面對瀏覽器使用緩存的各種情形做一下分析：
Pragma是HTTP 1.0版本的一個參數，在HTTP 1.1版本裡面這個參數也會生效，如果不想瀏覽器緩存網頁的內容，可以在 Response header 裡面加上 ：Pragma: no-cache。
Cache-Control是HTTP 1.1版本新增的一個參數。
Cache-Control:no-store 不允許緩存
Cache-Control:no-cache 不允許直接使用緩存，需要先發起請求和伺服器協商(這個經常被誤認為是不允許緩存，實際上它的作用是讓瀏覽器在使用緩存前先請求服務端一次，確認內容是否有更新)
這樣的響應代表沒有跟服務端進行交互，內容是直接從本地讀取的。
Expires和Cache-control: max-age= 有類似的作用，都是指定緩存內容的有效周期，Expires指定的格式是格林威治時間，max-age則是秒數。
服務端也可以在 Response header 里加上 Last-Modified,它的格式是格林威治時間，再次請求時，瀏覽器的 Request header 中會多出一個叫 If-Modified-Since的值，通過比較這兩個值是否一致來決定是否返回304。
ETag的用法和 Last-Modified 類似，值是一種文件指紋。比如：ETag:"5a3ccff0-5dc"。
服務端在 Response header 里加上 ETag，再次請求時，瀏覽器的 Request header 中會多出一個叫 If-None-Match的值，通過比較這兩個值是否一致來決定是否返回304。
總體來說，瀏覽器使用緩存時有兩種表現：
1.直接從本地讀取，不與服務端有交互，就是 200 OK (from memory cache)。
2.請求一次服務端，查看本地緩存是否生效，這種方式叫 協商緩存。如果服務端判斷緩存有效，將不返回完整內容，而是返回 304 Not Modified。
在優先順序上 Pragma > Cache-Control > Expires。