在前端開發中，性能是一個永恆的話題，沒有最好，只有更好。判斷一個網站性能好壞，一個直入眼觀的即是網頁的反應速度，有一個方式就是使用緩存，一個優秀的緩存策略可以縮短網頁請求的時間，減少延遲，並且網頁可以重復利用，還可以減少帶寬，降低網路負荷。
1： 為什麼需要緩存？
a：緩存可以減少用戶等待時間，提升用戶體驗
b：減少網路帶寬消耗
c：降低伺服器壓力
Note：緩存使用不當，也會造成『臟數據』問題
2：常見的緩存類型
強緩存 -
Expires伺服器端設置，表示該資源的過期時間，會有弊端，客戶端時間和伺服器時間不一致的問題。
Cache-Control：max-age表示緩存資源的最大生命周期，單位是秒
所以Expires 結合 Cache-Control 一起使用，大型網站中一般比較適用
協商緩存-
Last-Modified：值為資源的最後更新時間，隨伺服器response返回
If-Modified-Since：通過比較兩個時間來判斷資源在兩次請求期間是否有過修改，如果沒有，則命中協商緩存
Etag：表示資源內容的唯一標識，即資源的消息摘要
If-None-Match：伺服器通過比較請求頭中的If-None-Match與當前資源的Etag是否一致來判斷資源是否在兩次請求期間有過修改
3：緩存流程圖示：
a：瀏覽器會先檢測強緩存類型（Cache-Control 或者 Expires）是否有效；命中直接瀏覽器本地獲取緩存資源
b：未命中。伺服器會根據請求頭Request Header驗證這個資源是否命中協商緩存，稱之為HTTP二次驗證，命中，伺服器返回請求，但返回資源，而是告訴客戶端直接中直接從瀏覽器緩存中獲取
Note：
1.強緩存不會發生請求，協商緩存存在伺服器請求
2.當協商緩存也未命中時，則伺服器會將資源發送到客戶端
3.F5刷新頁面，會跳過強緩存
4.Ctrl+F5刷新頁面，跳過強緩存和協商緩存
5.不會緩存的情況
HTTPS POST請求 根據Cookie獲取認證信息 Request Header Cache-Control：no-cache， max-age=0
6.小故事大道理
上文對整個概念做了闡述，還是不夠形象，我們來通過幾個小故事生動理解一下：
故事一：Last-Modified
瀏覽器：Hi，我需要 jartto.min.js 這個文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之後修改過的，請發給我。
伺服器：（檢查文件的修改時間）
伺服器：Oh，這個文件在那個時間之後沒有被修改過，你已經有最新的版本了。
瀏覽器：太好了，那我就顯示給用戶了。
故事二：ETag
瀏覽器：Hi，我需要 jartto.css 這個文件，有沒有不匹配 3c61f-1c1-2aecb436 這個串的
伺服器：（檢查 ETag…）
伺服器：Hey，我這里的版本也是 3c61f-1c1-2aecb436，你已經是最新的版本了
瀏覽器：好，那就可以使用本地緩存了
2. 什麼是網頁緩存
來解決降低互聯網流量和提高終端用戶響應時間的網路技術，也可以叫做網頁緩存技術。
是搜索引擎經行蜘蛛爬行後，備份一份純文本的備份網頁，但是可能不保存CSS樣式，網頁快照就會出現，沒有樣式表或者部分錯位。
擴展網頁搜索結果的時間寬度，當檢索某個網頁後，網頁不存在或者改動，點擊網頁快照也可以訪問，比如訪問網路圖片，有些檢索出來存在網路資料庫的圖片，原網頁消失或者不能訪問，通過網路圖片搜索是可以訪問的，但是無法直接訪問原網頁圖片。
3. 網站內容緩存是什麼意思
一、什麼是緩存
瀏覽器緩存這個概念，對於經常用瀏覽器來瀏覽信息的用戶來說並不十分陌生。用戶也許在用瀏覽器瀏覽信息時，經常使用「返回」和「後退」的瀏覽功能，調用你以前閱讀過的頁面，這時，你會發現顯示速度是很快的，其實這些你剛調出來的內容就放在計算機的緩存中，而不需要再次從INTERNET上重新傳輸數據，這樣就會給用戶造成了一種訪問速度被提高的錯覺。所以瀏覽器緩存其實就是指在本地使用的計算機中開辟一個內存區，同時也開辟一個硬碟區作為數據傳輸的緩沖區，然後用這個緩沖區來暫時保存用戶以前訪問過的信息。既然緩存存在於硬碟之中，那麼它肯定是以文件夾的形式出現的。各個不同類型的瀏覽器都有各個不同的文件夾作為緩存使用，在系統的預設狀態下，IE3.0和IE4.0版本的瀏覽器緩存文件夾為「WINDOWSTemporary Internet Files」，而網景公司的NETSCAPE 3.0瀏覽器的緩存文件夾為「Program FilesNetscapeNavigatorCache」，但網景公司的高版本瀏覽器比如NetscapeCommunicator4.0的瀏覽器緩存文件夾為「PROGRAM FILESUsers用戶名cache」 中，其中用戶名是用戶登錄WINDOWS時使用的名字。
二、緩存是如何工作的
當用戶在瀏覽器中設置一定量的磁碟緩存後，瀏覽器上網工作時會把從網上讀出的網頁、圖像以及其它數據存放在磁碟緩存之中，並建立相應的文檔索引。在瀏覽器以後的工作中，將首先檢查磁碟緩沖區中是否存在相應的數據，如果有，則直接從本地磁碟上讀出，不再從網上下載，所節省的時間是顯而易見的。緩存按照信息存放的位置可以分成內存緩存和硬碟緩存。內存緩存是用於暫時存儲本次上網所調用的數據資料的，從INTERNET上傳來的每一個網頁信息，在內存緩存中都相應地給予保存一個備份，「返回」和「向前」實際上是將以前的頁面從內存緩存中調出來並顯示在用戶的瀏覽器窗口中，在內存緩存中存放的網頁信息量和內存緩存的大小有關，內存緩存越大，保存的網頁信息量就越多。硬碟緩存是用於保存用戶前幾次上網時所調用的信息資料，用戶從「歷史記錄」中調出來的內容其實就是保存在硬碟緩存中的，只要用戶開辟的硬碟緩存足夠大，將可以保存用戶前幾個星期甚至幾個月前調用過的信息資料。
通過上面的分析，我們發現在瀏覽器中設置適當的磁碟緩存是相當必要的，並且需要一定的容量，理論上這個值設置得越高，存入緩存的信息就越多，裝載它們的速度也就越快。那麼是不是設置的緩存容量越大，瀏覽的效率越高呢？答案當然是否定的，大家都知道物極必反的道理。如果緩存容量設置的太小，所能存放的數據信息量就很小，大部分數據還是需要從網上重新下載，並且系統還要花費一定的系統資源來頻繁清除緩存中的數據，最終結果會使瀏覽速度明顯下降，如果這是這樣的話，使用緩存到成了一種累贅，還不如不用的好。相反，如果瀏覽器的緩存設置得太大的話，那麼在你的磁碟緩存中存放的數據信息量將很龐大，以後在你每次需要重新訪問這些信息時，瀏覽器將不得不在你的龐大的緩存信息中搜索需要的文檔，這樣會使你的硬碟頻繁工作，所需要的時間將長於從網上下載數據的時間；另外如果緩存容量設置得太大，在硬碟容量一定的情況下，其他系統程序佔用的資源將變得相對較少，從而會降低計算機本身的運行速度。在這種情況下，磁碟緩存就失去了應有的作用。通常情況下，瀏覽器默認的內存緩存數值為600K，如果你的計算機有32～64M內存，並且在運行瀏覽器系統的時候沒有執行更多的其他應用程序，那麼可以把這個數值改為4～8M；對於硬碟緩存，瀏覽器默認的數值為5M，如果你經常要訪問的信息量很大，而且計算機中的硬碟有比較多的閑置空間，那麼你可以把硬碟緩存的數值設置成500M～1000M。
三、怎樣正確設置緩存
用戶無論使用的是哪一種瀏覽器，正確地設置瀏覽器的緩存參數將大大提高你的瀏覽效率，同時也將一定程度上改善你的瀏覽器的工作性能；但是如果使用不恰當，設置不正確那不但不會提高你的工作效率，反而還能降低計算機的運行速度。不同的瀏覽器有不同的設置方法：
A、IE4.0瀏覽器設置緩存大小的方法如下:
1、首先打開瀏覽器的操作窗口，然後用滑鼠淡季「查看」菜單中的「Internet選項」，程序會打開一個選項對話框。
2、在選項對話框中找到「INTERNET 臨時文件」欄，並用滑鼠單擊該欄右邊的「設置」按鈕，同樣地程序也會打開一個設置框。
3、在設置框中，用戶可以直接用滑鼠來移動滑動桿即可改變緩存的大小。
4、參數設置好後，單擊「應用」按鈕使上述設置生效，最後單擊「確定」按鈕，退出參數設置對話框。
B、IE5.0瀏覽器設置緩存大小的方法如下:
1、打開IE5.0操作窗口，在窗口中用滑鼠單擊「工具」菜單中的「Internet選項」，屏幕上將出現「Internet選項」對話框。
2、在選項對話框中，單擊「常規」標簽下的「Internet臨時文件」設置欄，並用滑鼠單擊該欄中的「設置」按鈕，程序將會打開一個標題為「設置」的對話框；當然，IE4.0以上版本的瀏覽器帶有自動清除磁碟緩存的功能，如果用戶想在這里節省硬碟的空間，也可以按「刪除文件」按鈕，來釋放出更多的緩存空間，這種刪除緩存內容的方式比較徹底。
3、在「設置」對話框上面有四個單選項：
「每次訪問此頁時檢查」單選項表示瀏覽器將發送一個信息給所要訪問的頁面的WEB伺服器，查問當前訪問的信息是否有變動，如沒有變動，就從硬碟緩存中直接調用，而且每次訪問都要發送信息給WEB伺服器進行驗證。
「每次啟動INTERNETEXPLORER時檢查」表示本次上網瀏覽器將只發送一次信息給WEB伺服器進行驗證，以後無論信息是否發生變動，都從硬碟緩存中直接調用所要訪問的頁面的信息。
「自動」單選項表示瀏覽器將自動檢查所要訪問的信息最新是否發生變動，如果變動的話，就從INTERNET上重新下載網頁，如果沒有變動的話，就直接從硬碟中讀取數據。
「不檢查」單選項表示對要調用的頁面信息不進行校驗，只要硬碟硬碟上有，就直接從硬碟中調用。弄清楚了上面四個選項後，用戶可以根據自己的實際情況進行設定，瀏覽器默認選擇「自動」這一單選項。
4、接著用戶可以在「使用的磁碟空間處」用滑鼠直接拖動滑動桿來改變緩存的大小，或者直接在後面的文本框中輸入具體的數值。如果用戶想改變瀏覽器緩存的位置，例如用戶的C盤空間緊張時或者為了使用方便，用戶需要把緩存移到其它分區或者把緩存放到一個易操作的地方，這時就可以通過另外選擇一個文件夾來作為緩存，在這里用戶只要按下「移動文件夾」並指定要新建的文件夾名稱就行了。
5、同樣地，參數設置好後，單擊「應用」按鈕使上述設置生效，最後單擊「確定」按鈕，退出選項對話框。
C、Netscape3.0瀏覽器設置緩存大小的方法如下:
1、運行瀏覽器程序，在瀏覽窗口中用滑鼠單擊「Options」菜單下面的「Network Preference」菜單項，瀏覽器將會彈出一個參數設置窗口。
2、在該窗口中單擊「Cache」標簽，我們就會發現該標簽下提供的設置內容都是與緩存有關的，用戶可以根據自己計算機的硬體配置情況，在「Memory」文本欄處輸入適當的內存緩存的數值，在「Disk」文本欄處輸入需要的硬碟緩存數值。
3、在該標簽，用戶也可以單擊「Clear memory cache now」來直接清除內存緩存中的內容，通過單擊「Clear disk cache now」按鈕來清除硬碟緩存中的內容。
4、在「Disk cache」文本欄處用戶可以另外指定一個文件夾作為硬碟緩存的目錄，瀏覽器默認的緩存目錄為「Program FilesNetscapeNavigatorCache」。
5、在「Verify」驗證欄處有三個單選項，其中「Once per session」功能與「每次啟動INTERNETEXPLORER時檢查」相同，「Every time」作用與「每次訪問此頁時檢查」 相同，「Never」當然與「不檢查」相同，瀏覽器默認會選中「Once per session」選項。
6、設置好所有參數後，單擊「確定」按鈕完成設置任務。
D、Netscape4.0以上版本瀏覽器設置緩存大小的方法如下:
1、在瀏覽器操作窗口中，用滑鼠單擊菜單欄中的「EDIT」菜單項下面的「Preferences」命令，程序會彈出一個設置對話框。
2、在該對話框的目錄欄中，選擇「Advanced」下面的「Cache」命令，用戶就會發現一個與緩存有關的設置界面。
3、這個設置界面與Netscape3.0瀏覽器的緩存設置界面相似，所以下面的設置基本上就與Netscape3.0瀏覽器設置緩存大小的方法相同。
好了，到了這里相信大家對瀏覽器緩存的使用已基本熟悉了。不過，最後筆者還要提醒大家兩點的是：1、磁碟緩存如果使用不當或使用時間較長時，有時可以導致瀏覽器降低工作效率或乾脆停止工作，最為典型的現象有兩種：一是打開一個網頁時硬碟不停的工作，需要很長的時間才有反應。這是因為緩存太長以及緩存中數據太多造成的。另外一種現象就是瀏覽器乾脆不工作，無法打開任何網頁。這是因為緩存中的數據文檔混亂或者已經破壞造成的。解決此類問題的方法是適當減小緩存尺寸或者定期及時清理緩存中的數據。2、使用緩存後網頁有可能不能自動更新，雖然在設置緩存時讓它可以自動檢測網頁是否更新，但實際使用中往往每次都是讀出的舊網頁內容，這樣網上內容更新時用戶就不能及時了解。解決上述故障的方法是必須隨時按下瀏覽器的「刷新」或「Reload」按鈕。
4. 為什麼老是有緩存垃圾呢
比如說你瀏覽網頁，瀏覽器就會把從網上接收的到的圖片或數據暫時性的存在sd卡里。這些東西就是緩存垃圾了。很簡單的例子就是，當你瀏覽下一個網頁時，需要等待讀取時間，當按返回或後退的時候，卻可以立馬看到內容。這就是因為這些數據被暫時性的儲存了起來