在前端開發中，性能一直都是被大家所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。 其中提高網頁反應速度的一個方式就是使用緩存 。緩存技術一直一來在WEB技術體系中扮演非常重要角色，是快速且有效地提升性能的手段。
一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，並且由於緩存文件可以重復利用，還可以減少帶寬，降低網路負荷。
所以，緩存技術是無數WEB開發從業人員在工作過程中不可避免的一大問題。 在產品開發的時候我們總是想辦法避免緩存產生，而在產品發布之時又在想策略管理緩存提升網頁的訪問速度 。了解瀏覽器的緩存命中原理，是開發WEB應用的基礎，本文著眼於此，學習瀏覽器緩存的相關知識，總結緩存避免和緩存管理的方法，結合具體的場景說明緩存的相關問題。希望能對有需要的人有所幫助。
在實際WEB開發過程中，緩存技術會涉及到不同層、不同端，比如：用戶層、系統層、代理層、前端、後端、服務端等， 每一層的緩存目標都是一致的，就是盡快返回請求數據、減少延遲 ，但每層使用的技術實現是各有不同，面對不同層、不同端的優劣，選用不同的技術來提升系統響應效率。所以，我們首先看下各層的緩存都有哪些技術，都緩存哪些數據，從整體上，對WEB的緩存技術進行了解，如下圖所示：
本篇文章重點講的就是上面紅色框部分緩存內容。
當瀏覽器請求一個網站的時候，會載入各種各樣的資源，比如：HTML文檔、圖片、CSS和JS等文件。對於一些不經常變的內容，瀏覽器會將他們保存在本地的文件中，下次訪問相同網站的時候，直接載入這些資源，加速訪問。
那麼如何知曉瀏覽器是讀取了緩存還是直接請求伺服器？如下圖網站來做個示例：
第一次打開該網站後，如果再次刷新頁面。會發現瀏覽器載入的眾多資源中，有一部分size有具體數值，然而還有一部分請求，比如圖片、css和js等文件並沒有顯示文件大小，而是顯示了 from dis cache 或者 from memory cache 字樣。這就說明了，該資源直接從本地硬碟或者瀏覽器內存讀取，而並沒有請求伺服器。
瀏覽器啟用緩存至少有兩點顯而易見的好處： （1）減少頁面載入時間；（2）減少伺服器負載；
瀏覽器是否使用緩存、緩存多久，是由伺服器控制的 。准確來說，當瀏覽器請求一個網頁（或者其他資源）時， 伺服器發回的響應的「響應頭」部分的某些欄位指明了有關緩存的關鍵信息 。下面看下，HTTP報文中與緩存相關的首部欄位：
根據上面四種類型的首部欄位不同使用策略， 瀏覽器中緩存可分為強緩存和協商緩存 ：
當瀏覽器對某個資源的請求命中了強緩存時， 返回的HTTP狀態為200 ，在chrome的開發者工具的network裡面 size會顯示為from cache ，比如：京東的首頁里就有很多靜態資源配置了強緩存，用chrome打開幾次，再用f12查看network，可以看到有不少請求就是從緩存中載入的：
Expires是HTTP 1.0提出的一個表示資源過期時間的header，它描述的是一個絕對時間，由伺服器返回，用GMT格式的字元串表示 ，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，包含了Expires頭標簽的文件，就說明瀏覽器對於該文件緩存具有非常大的控制權。
例如，一個文件的Expires值是2020年的1月1日，那麼就代表，在2020年1月1日之前，瀏覽器都可以直接使用該文件的本地緩存文件，而不必去伺服器再次請求該文件，哪怕伺服器文件發生了變化。
所以， Expires是優化中最理想的情況，因為它根本不會產生請求 ，所以後端也就無需考慮查詢快慢。它的緩存原理，如下：
Expires是較老的強緩存管理header， 由於它是伺服器返回的一個絕對時間 ，在伺服器時間與客戶端時間相差較大時，緩存管理容易出現問題， 比如：隨意修改下客戶端時間，就能影響緩存命中的結果 。所以在HTTP 1.1的時候，提出了一個新的header， 就是Cache-Control，這是一個相對時間，在配置緩存的時候，以秒為單位，用數值表示 ，如：Cache-Control:max-age=315360000，它的緩存原理是：
Cache-Control描述的是一個相對時間 ，在進行緩存命中的時候， 都是利用客戶端時間進行判斷 ，所以相比較Expires，Cache-Control的緩存管理更有效，安全一些。
這兩個header可以只啟用一個，也可以同時啟用， 當response header中，Expires和Cache-Control同時存在時，Cache-Control優先順序高於Expires ：
此外，還可以為 Cache-Control 指定 public 或 private 標記。 如果使用 private，則表示該資源僅僅屬於發出請求的最終用戶，這將禁止中間伺服器（如代理伺服器）緩存此類資源 。對於包含用戶個人信息的文件（如一個包含用戶名的 HTML 文檔），可以設置 private，一方面由於這些緩存對其他用戶來說沒有任何意義，另一方面用戶可能不希望相關文件儲存在不受信任的伺服器上。需要指出的是，private 並不會使得緩存更加安全，它同樣會傳給中間伺服器（如果網站對於傳輸的安全性要求很高，應該使用傳輸層安全措施）。 對於 public，則允許所有伺服器緩存該資源 。通常情況下，對於所有人都可以訪問的資源（例如網站的 logo、圖片、腳本等）， Cache-Control 默認設為 public 是合理的 。
當瀏覽器對某個資源的請求沒有命中強緩存， 就會發一個請求到伺服器，驗證協商緩存是否命中，如果協商緩存命中，請求響應返回的http狀態為304並且會顯示一個Not Modified的字元串 ，比如你打開京東的首頁，按f12打開開發者工具，再按f5刷新頁面，查看network，可以看到有不少請求就是命中了協商緩存的：
查看單個請求的Response Header， 也能看到304的狀態碼和Not Modified的字元串，只要看到這個就可說明這個資源是命中了協商緩存，然後從客戶端緩存中載入的 ，而不是伺服器最新的資源：
【Last-Modified，If-Modified-Since】的控制緩存的原理，如下 ：
【Last-Modified，If-Modified-Since】都是根據伺服器時間返回的header，一般來說， 在沒有調整伺服器時間和篡改客戶端緩存的情況下，這兩個header配合起來管理協商緩存是非常可靠的，但是有時候也會伺服器上資源其實有變化，但是最後修改時間卻沒有變化的情況 ，而這種問題又很不容易被定位出來，而當這種情況出現的時候，就會影響協商緩存的可靠性。 所以就有了另外一對header來管理協商緩存，這對header就是【ETag、If-None-Match】 。它們的緩存管理的方式是：
Etag和Last-Modified非常相似，都是用來判斷一個參數，從而決定是否啟用緩存。 但是ETag相對於Last-Modified也有其優勢，可以更加准確的判斷文件內容是否被修改 ，從而在實際操作中實用程度也更高。
協商緩存跟強緩存不一樣，強緩存不發請求到伺服器， 所以有時候資源更新了瀏覽器還不知道，但是協商緩存會發請求到伺服器 ，所以資源是否更新，伺服器肯定知道。大部分web伺服器都默認開啟協商緩存，而且是同時啟用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】，比如apache:
如果沒有協商緩存，每個到伺服器的請求，就都得返回資源內容，這樣伺服器的性能會極差。
【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同時啟用，這是為了處理Last-Modified不可靠的情況。有一種場景需要注意：
比如，京東頁面的資源請求，返回的repsonse header就只有Last-Modified，沒有ETag：
協商緩存需要配合強緩存使用，上面這個截圖中，除了Last-Modified這個header，還有強緩存的相關header， 因為如果不啟用強緩存的話，協商緩存根本沒有意義 。
如果資源已經被瀏覽器緩存下來，在緩存失效之前，再次請求時，默認會先檢查是否命中強緩存，如果強緩存命中則直接讀取緩存，如果強緩存沒有命中則發請求到伺服器檢查是否命中協商緩存，如果協商緩存命中，則告訴瀏覽器還是可以從緩存讀取，否則才從伺服器返回最新的資源。其瀏覽器判斷緩存的詳細流程圖，如下：
『貳』 如何查看谷歌瀏覽器的緩存
不同系統下，緩存文件位置不太一樣。
xp系統下，google瀏覽器上網緩存文件默認位置在C:\Documents and Settings\user（你的登錄賬戶）\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
Windows7系統下，則在：C:\Users\你的登錄賬戶\AppData\Local\Google\Chrome\User Data\Default\Cache
『叄』 internet 緩存文件
一、什麼是緩存
瀏覽器緩存這個概念，對於經常用瀏覽器來瀏覽信息的用戶來說並不十分陌生。用戶也許在用瀏覽器瀏覽信息時，經常使用「返回」和「後退」的瀏覽功能，調用你以前閱讀過的頁面，這時，你會發現顯示速度是很快的，其實這些你剛調出來的內容就放在計算機的緩存中，而不需要再次從INTERNET上重新傳輸數據，這樣就會給用戶造成了一種訪問速度被提高的錯覺。所以瀏覽器緩存其實就是指在本地使用的計算機中開辟一個內存區，同時也開辟一個硬碟區作為數據傳輸的緩沖區，然後用這個緩沖區來暫時保存用戶以前訪問過的信息。既然緩存存在於硬碟之中，那麼它肯定是以文件夾的形式出現的。各個不同類型的瀏覽器都有各個不同的文件夾作為緩存使用，在系統的預設狀態下，IE3.0和IE4.0版本的瀏覽器緩存文件夾為「WINDOWSTemporary Internet Files」，而網景公司的NETSCAPE 3.0瀏覽器的緩存文件夾為「Program FilesNetscapeNavigatorCache」，但網景公司的高版本瀏覽器比如Netscape Communicator4.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伺服器進行驗證。
「每次啟動INTERNET EXPLORER時檢查」表示本次上網瀏覽器將只發送一次信息給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」功能與「每次啟動INTERNET EXPLORER時檢查」相同，「Every time」作用與「每次訪問此頁時檢查」 相同，「Never」當然與「不檢查」相同，瀏覽器默認會選中「Once per session」選項。
6、設置好所有參數後，單擊「確定」按鈕完成設置任務。
D、Netscape4.0以上版本瀏覽器設置緩存大小的方法如下:
1、在瀏覽器操作窗口中，用滑鼠單擊菜單欄中的「EDIT」菜單項下面的「Preferences」命令，程序會彈出一個設置對話框。
2、在該對話框的目錄欄中，選擇「Advanced」下面的「Cache」命令，用戶就會發現一個與緩存有關的設置界面。
3、這個設置界面與Netscape3.0瀏覽器的緩存設置界面相似，所以下面的設置基本上就與Netscape3.0瀏覽器設置緩存大小的方法相同。
好了，到了這里相信大家對瀏覽器緩存的使用已基本熟悉了。不過，最後筆者還要提醒大家兩點的是：1、磁碟緩存如果使用不當或使用時間較長時，有時可以導致瀏覽器降低工作效率或乾脆停止工作，最為典型的現象有兩種：一是打開一個網頁時硬碟不停的工作，需要很長的時間才有反應。這是因為緩存太長以及緩存中數據太多造成的。另外一種現象就是瀏覽器乾脆不工作，無法打開任何網頁。這是因為緩存中的數據文檔混亂或者已經破壞造成的。解決此類問題的方法是適當減小緩存尺寸或者定期及時清理緩存中的數據。2、使用緩存後網頁有可能不能自動更新，雖然在設置緩存時讓它可以自動檢測網頁是否更新，但實際使用中往往每次都是讀出的舊網頁內容，這樣網上內容更新時用戶就不能及時了解。解決上述故障的方法是必須隨時按下瀏覽器的「刷新」或「Reload」按鈕。
『肆』 如何查找瀏覽器的緩存文件
如果軟體設計有疏忽或者系統有問題，當安裝結束後，這些臨時文件就會變得並不「臨時」，成為硬碟里的一堆垃圾，很多時候它們以*.tmp的面孔出現。2.軟體運行過程中產生的臨時文件和安裝過程一樣，在軟體的運行過程中通常也會產生一些臨時交換文件，有些軟體運行過後遺留下來的垃圾甚至多達數百兆，比如一些程序工作時產生的形如*.old、*.bak這樣的備份文件，殺毒軟體或系統軟體檢查硬碟時生成的備份文件等。3.軟體卸載後的遺留文件由於Windows的反安裝機制實在讓人無法恭維，再加上多數軟體都使用了動態鏈接庫（DLL），而其中一些軟體的設計還不太成熟，導致了很多軟體「請神容易送神難」。當這些軟體被卸載後，經常會在硬碟中留下一些文件夾、*.dll文件以及形形色色不知名的小東西，成為名副其實的垃圾。在現實生活中，有很多初學者往往會錯誤地使用直接刪除文件夾的方法「卸載」軟體，這樣就會留下更多無效的類似*.ini、*.dll這樣的文件。同時還會在注冊表中殘存大量廢棄數據，對系統的穩定造成更大影響。4.上網沖浪產生的臨時文件我們在上網的時候，瀏覽器總是將網頁文件下載到本地機器上，這些緩存文件不但佔用了寶貴的磁碟空間，還常常會把我們的個人隱私公之於眾，是可忍，孰不可忍。5.一些不常用的雞肋文件比如一些應用軟體自帶的幫助或教程文件（常以.hlp等作為後綴），操作系統中多餘的字體文件等。既然食之無味索性也將它們視作垃圾文件的一種表現。比如大量的字體文件不僅身體肥壯，佔用空間甚大，更會嚴重拖累系統和一些圖形處理軟體的運行速度。二、如何刪除垃圾文件垃圾文件有如過街老鼠，人人喊打。因此對付它的各種工具軟體也是數不勝數。國產軟體「環保衛士」和「Windows優化大師」等就是其中的典範。不過，這些共享軟體往往在使用過程中會受到某些限制，用起來不是很方便。幸而筆者已經發現了兩個完全免費的殺「鼠」方案，下面就簡單介紹一下，與大家共享。利用「上網助手」，我們可以刪除系統運行一段時間後遺留下來的臨時文件和各種其他不需要的文件，節省磁碟空間，提高運行速度。隱私保護功能「上網助手」還可以實現隱私保護功能，它能幫助我們清除上網留下的網頁信息（包括地址欄網址、臨時文件、歷史記錄、您輸入過的用戶名、密碼或搜索關鍵字等）。它甚至還可以將此項功能延伸至清除「開始菜單」中的最近使用過的文檔記錄、訪問「網上鄰居」時產生的信息等等。其操作都採用向導方式，非常容易上手。2.綠色的「垃圾文件清理器（FileClear）」這是軟體作者在業余時間用C++ Builder編寫的一個免費小工具（僅有335KB），下載後無須安裝即可直接使用（下載網址：）。這款工具的界面相當簡潔，運行速度比較快，基本的「掃描」、「備份」和「刪除」功能完全具備。惟一的缺陷就是自身收集的垃圾文件擴展名比較少，需要我們通過「添加類型」功能來為其補充新鮮血液。三、清理注冊表不用怕Windows的注冊表在操作系統中起著舉足輕重的作用，它包含了系統初始化、應用程序初始化信息等一系列Windows運行信息和數據。在一些不需要的軟體卸載後，Windows注冊表中有關已經卸載的應用程序參數往往不能清除干凈，因此要想徹底刪除干凈軟體的遺留殘渣，還需要對注冊表進行清理，另外一個原因是如果有大量已刪除軟體的殘渣遺留，系統經過長時間使用，在啟動速度、運行速度等方面都會變的緩慢無比，所以經常給注冊表進行「減肥」運動是非常必要的。可以手工進行清理注冊表，但是是一件很煩瑣的事，需要一點一點查找，並且手動修改，鑒於上面提到的注冊表在整個系統中舉足輕重的重要性，手動改正是很危險。那麼我們就來看一款清理注冊表的軟體，這也是單位的電腦高手推薦給筆者的，的確讓筆者省心不少，現在已經安裝好FTP新軟體了，並且對注冊表進行「有史以來」的大清理，實在是有點不好意思。筆者使用的這款注冊表清理工具是微軟編寫的免費軟體RegClean。
『伍』 如何查查找瀏覽器里的緩存任務文件
小編有一個十分簡單的方法，如下：
在ie里，選擇「工具」-internet選項-internet臨時文件（設置）-察看文件，就能打開緩存文件夾。
『陸』 如何提取chrome瀏覽器緩存中的視頻和音樂
方法如下：
1、在chrome瀏覽器中，可以利用F12鍵審查元素的功能查出原視頻或音樂的源地址，可以通過源地址下載下來；
『柒』 想問下高手怎麼截取瀏覽器的緩存，
LZ是想提取已經在網頁上打開的Flash或者圖片嗎？
打開IE——工具——Internet選項——瀏覽器歷史記錄標題下的設置——查看文件 即可~！
建議改為詳細列表——按類型或時間排列。方便LZ找自己想要的東西！！
『捌』 如何直接從瀏覽器緩存獲取資源
打開流覽器，點菜單欄的工具～INTERNET選項，～到常規選項卡找到臨時文件區，點那個按鈕就打開查看臨時文件的路徑，回我的電腦安這個路徑依次打開文件夾就找到了