前言
????緩存一直是一個前端的痛點凹联，相信很多前端在面試的時候，大多是都遇到過緩存問題。接下來我們一起來學(xué)習(xí)
優(yōu)點
相信大家都知道緩存的好處未辆，那這里還是再簡單的嘮叨一下～～
緩存是用來提高性能的一項必不可少的技術(shù) ，利用這項技術(shù)可以很好地提高web的性能：
1.打開本地資源速度當(dāng)然比請求回來再打開要快得多锯玛。
2.緩存可以很有效地降低網(wǎng)絡(luò)的時延咐柜，同時也會減少大量請求對于服務(wù)器的壓力。
3.緩存可以減少帶寬消耗攘残。
一個小的概念
????首先我們要知道——緩存實際上就是——請求資源的拷貝拙友。
????思考一個小問題——如果每次請求都將資源保存下來，那豈不是很傻逼的做法嗎歼郭？內(nèi)存被大量的消耗遗契，開發(fā)者不易維護，沒有固定的協(xié)議告訴我病曾，這個緩存什么時候過期牍蜂，什么時候需要請求新的資源，之前的緩存的資源在本次請求中是否還有用泰涂，自然的鲫竞，客戶端也會崩潰。
????如何解決——那就是利用HTTP協(xié)議逼蒙，HTTP協(xié)議是我們每次請求必經(jīng)之路贡茅，那么通過HTTP協(xié)議來確定上面的這些問題在合適不過了。
緩存分類
第一種分類：
1. 共享緩存：各級代理緩存的資源。
2. 私有緩存：用戶專有的資源顶考。
第二種分類(后端---->前端)：
1. 數(shù)據(jù)庫緩存：
????對于系統(tǒng)一些非常復(fù)雜的查詢赁还，可以將查詢到的結(jié)果保存在內(nèi)存中，下次就不需要查詢數(shù)據(jù)庫驹沿，導(dǎo)致數(shù)據(jù)庫鴨梨三大艘策，而是直接從內(nèi)存中讀取即可。
2. 網(wǎng)關(guān)緩存：
????也被稱為“反向代理緩存”或“替代緩存”渊季。網(wǎng)關(guān)緩存起中介作用朋蔫，多半是網(wǎng)站管理員（公司專門的運維工程師、或UED或程序組某人Add）部署却汉，這樣更容易擴展與維護驯妄。可以有多種方法把請求路由到網(wǎng)關(guān)緩存合砂，但通常使用某種形式的負載均衡器青扔，使它們看起來像源服務(wù)器。[此處不深入展開]
3. 代理服務(wù)器緩存：
????也被稱為“正向代理緩存”翩伪，代理服務(wù)器緩存原理為成千上萬的用戶提供緩存機制微猖。每一次請求先發(fā)送到代理服務(wù)器上，代理服務(wù)器存在請求的數(shù)據(jù)缘屹，則返回給客戶端凛剥，不存在就轉(zhuǎn)發(fā)到源服務(wù)器并取得響應(yīng)結(jié)果后，再返回給客戶端轻姿。同一個緩存可能會被重用多次犁珠，減少響應(yīng)時間和帶寬以及源服務(wù)器的鴨梨。
4. 瀏覽器緩存：
????相信你開發(fā)某個網(wǎng)站時互亮，肯定使用過“清空緩存”來解決問題盲憎，這就是在清除緩存在本地磁盤上的資源數(shù)據(jù)。在本地緩存是非常有用的胳挎，訪問本地與發(fā)送請求接受請求饼疙，快了不知多少倍呢。
????對于上面幾種緩存慕爬，前端遇到最多的就是瀏覽器緩存了吧窑眯，接下來我們一起來深入理解瀏覽器緩存吧～
瀏覽器緩存
對于一個完整的HTTP GET請求緩存過程會包含幾個主要的步驟：
①客戶端讀取請求報文并且對報文進行解析, 提取URL和各種首部。
②查詢是否在本地有請求資源副本医窿，如果本地沒有資源副本就會從服務(wù)器上獲取資源磅甩，并且保存在本地。
或者：接著會進行查看資源副本是否足夠新鮮（新鮮度檢測）姥卢， 如果緩存已經(jīng)失效就會詢問服務(wù)器是否有任何更新卷要。
③服務(wù)器用新的首部和已緩存的主體來構(gòu)建一條響應(yīng)報文渣聚。
④服務(wù)器將響應(yīng)報文發(fā)送給客戶端。
⑤客戶端讀取響應(yīng)報文進行相應(yīng)的操作僧叉。
先來看一張瀏覽器緩存過程的的圖片奕枝，可以不看具體內(nèi)容，接下來我們會根據(jù)本圖詳細講解瀏覽器緩存～
劃重點：根據(jù)緩存處理方式的不同瓶堕，接著瀏覽器緩存又分為又會分為：強緩存階段隘道、協(xié)商緩存階段 、啟發(fā)式緩存階段郎笆。一起來看看吧～～
強緩存
? ? 在閱讀下面知識點谭梗，請自行解決請求頭和報文頭，三次握手等相關(guān)的網(wǎng)絡(luò)知識點宛蚓。好了激捏，接下來我們正式開始理解～～
????強緩存主要是響應(yīng)頭中的Cache-Control和Expires兩個字段進行控制的。
? ? Expires：HTTP/1.0中定義凄吏，指定了一個絕對的過期時期远舅，但設(shè)計之初存在著缺陷：如果本地時間和服務(wù)器時間相差太大，就會導(dǎo)致緩存錯亂竞思。
? ? Cache-Control：HTTP 1.1中定義表谊，Cache-Control:max-age定義了一個最大使用期钞护，就是從第一次生成文檔到緩存不再生效的合法生存時間盖喷。
? ? 同時使用：當(dāng)然是HTTP協(xié)議高的優(yōu)先級高，不然要再來一個緩存字段干嘛难咕？所以 Cache-Control > Expires课梳。
? ? 一個場景：當(dāng)瀏覽器再次訪問之前訪問過的CSS文件時，發(fā)現(xiàn)本地這個文件的緩存余佃，就根據(jù)上一次的響應(yīng)頭判斷是否過期暮刃，沒過期，使用緩存加載文件爆土。但是過期了呢椭懊？？步势？請接著看～～
? ? 過期之后氧猬，ETag 和 Last-Modified 就開始參與強緩存的判斷了。
? ??Last-Modified：文件最后一次修改的時間坏瘩。
? ??ETag：對文件的一個標(biāo)記盅抚。可能是抗碰撞散列函數(shù)倔矾、最近修改時間戳的哈希值妄均、甚至只是一個版本號等等柱锹。
協(xié)商緩存
????強緩存機制如果檢測到緩存失效，就需要進行服務(wù)器再驗證丰包，這種緩存機制也稱作協(xié)商緩存禁熏。
? ? 1. 當(dāng)瀏覽器再次試圖訪問CSS文件，發(fā)現(xiàn)緩存過期烫沙，如果上一次的響應(yīng)頭中有ETag 和 Last-Modified匹层，就會在本次請求的請求頭里攜帶If-Moified-Since和If-None-Match這兩個字段，進入步驟2锌蓄。如果上一次的響應(yīng)頭中沒有ETag 和 Last-Modified升筏，就直接像服務(wù)器發(fā)送請求，進入步驟4瘸爽。
? ? 2. 服務(wù)器通過If-Moified-Since和If-None-Match這兩個字段來判斷資源是否有修改您访，如果有修改則返回狀態(tài)碼200和新的內(nèi)容，如果沒有修改返回狀態(tài)碼304剪决。
? ? 3. 瀏覽器收到200狀態(tài)碼灵汪，相當(dāng)于首次訪問這個文件，該怎么處理就怎么處理柑潦。瀏覽器收到304狀態(tài)碼享言，知道本地緩存雖然過期但仍然可以用，加載本地緩存渗鬼。
? ? 4. 根據(jù)新返回的響應(yīng)頭來設(shè)置緩存览露。
啟發(fā)式緩存
????瀏覽器用來確定緩存過期時間的字段一個都沒有時，那該怎么辦譬胎？瀏覽器進入啟發(fā)式緩存階段差牛。
????根據(jù)響應(yīng)頭中2個時間字段 Date 和 Last-Modified 之間的時間差值，取其值的10%作為緩存時間周期堰乔。
? ? 這個階段很容讓人忽視偏化，但實際上每時每刻都在發(fā)揮著作用。所以在今后開發(fā)過程中如果遇到默認(rèn)緩存的坑镐侯，要知道瀏覽器只是在遵循啟發(fā)式緩存協(xié)議而已巡李。
附加知識點
????關(guān)于緩存是從磁盤中獲取還是從內(nèi)存中獲取拗军，Chrome會根據(jù)本地內(nèi)存的使用率來決定緩存存放在哪件相，如果內(nèi)存使用率很高踊挠，放在磁盤里面，內(nèi)存的使用率很高會暫時放在內(nèi)存里面袜瞬。這就可以比較合理的解釋了為什么同一個資源有時是from memory cache有時是from disk cache的問題了怜俐。
完結(jié)
再去看看上邊的圖吧，很好的解釋了瀏覽器緩存過程～～
參考文章：前端性能優(yōu)化之緩存之路邓尤、緩存詳解
