利用瀏覽器緩存

① 瀏覽器緩存的方式和類型（筆記）

瀏覽器緩存只是計算機緩存的一種

1.內存緩存
將數據存到內存
2.代理伺服器緩存
就是個自己找的中介。你拿東西先找中介，中介找房東，房東給中介，中介又給你。比如你需要房子鑰匙，房東把鑰匙放在中介那，你直接從中介那裡拿鑰匙。
3.CDN緩存
將數據存到CDN伺服器。CDN也是個中介，不過這個中介是根據中介的忙碌程度（CDN伺服器忙碌程度）、跟你的距離（CDN伺服器和你的距離）自動給你分配的。
4.瀏覽器緩存（ 我是個前端，只關注瀏覽器緩存。 ）
根據HTTP協議決定要不要緩存，以什麼方式緩存，緩存到哪（內存還是硬碟等）。

瀏覽器緩存是將瀏覽器請求過的數據（資源文件）保存到電腦上。需要再次使用的時候，直接從電腦上獲取保存的數據（資源文件），這就是瀏覽器緩存

1.減少網路請求，節省流量
2.減輕伺服器壓力
3.資源載入速度快了，前端性能就更好了

1.Server Worker
還沒搞懂，搞懂了再來寫。
2.Memory Cache
內存中的緩存，關閉頁面進程就釋放內存
3.Disk Memory
硬碟中的緩存，不主動清理就一直在

4、Push Cache
推送緩存，是HTTP/2的內容，並沒有嚴格執行HTTP頭部的緩存指令。在Server Worker、Memory Cache、Disk Cache都沒有命中的時候，它會被使用。在Session中存在，Session結束就會被釋放，緩存時間短暫。

1.先去內存查找，找到直接載入
2.內存找不到，硬碟中找，找到直接載入
3.硬碟找不到進行網路請求
4.把請求獲取的資源再緩存到硬碟和內存

1.強緩存
控制強制緩存的欄位分別是Expires和Cache-Control，Cache-Control優先順序比Expires高
-Expires設置一個絕對時間的GMT格式的時間字元串，這個是資源失效時間（ 客戶端的時間小於Expires的值，缺陷就是客戶端的時間被改變就有問題 ），在這個時間之前都直接讀取緩存。
-Cache-Control替代Expires，它利用的是相對時間，利用header信息欄位的max-age值判斷。
2.協商緩存
-Last-Modified/If-Modified-Since
Last-Modified:瀏覽器向伺服器發送資源最後的修改時間
If-Modified-Since:當資源過期時，發現響應頭具有Last-Modified聲明，則再次向伺服器請求時帶上頭if-modified-since，表示請求時間。伺服器收到請求後，發現有if-modified-since則與被請求資源的最後修改時間進行對比（Last-Modified）,若最後修改時間較新，說明資源又被改過，則返回最新資源，返回200；若最後修改時間較小，說明資源無新修改，返回304 ，使用緩存文件。
缺點:單位是秒，一秒內多次改變會認為沒過期
-ETag/If-None-Match
ETag:由伺服器生成返回給前端，幫助伺服器控制web端的緩存驗證，伺服器會生成並且返回當前資源文件的一個唯一標識
If-None-Match:當資源過期時，發現響應頭具有Etag聲明，則再次向伺服器請求時帶上頭if-none-match（唯一標識Etag值）。伺服器收到該請求後，發現有If-None-Match則根據If-None-Match的欄位值與該資源在伺服器的Etag值做對比，一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200。

1.強緩存不發請求，協商緩存會發請求給伺服器確認有沒有過期
2.強緩存文件更新瀏覽器不知道，協商緩存更新瀏覽器能實時知道

1.點擊瀏覽器的刷新按鈕時，全部走緩存
2.F5或者滑鼠右鍵刷新強制緩存失效，不影響協商緩存
3.CTRL+F5影響強制緩存和協商緩存都失效

② 瀏覽器緩存怎麼清理 讓你的電腦跑得更快

以下是一些清理瀏覽器緩存的方法：

無論使用哪種方法，清理瀏覽器緩存都是一個簡單但非常有效的方法來提高瀏覽器性能，讓你的電腦跑得更快。

以下是一些清理瀏覽器緩存的方法：

無論使用哪種方法，清理瀏覽器緩存都是一個簡單但非常有效的方法來提高瀏覽器性能，讓你的電腦跑得更快。

1. 使用瀏覽器自帶的清理功能。大多數瀏覽器都提供了清理緩存的功能，可以通過瀏覽器設置或選項菜單中的「清除瀏覽數據」或「清除緩存」來實現。此方法可以清除瀏覽器緩存、歷史記錄、下載記錄等。

1. 使用瀏覽器自帶的清理功能。大多數瀏覽器都提供了清理緩存的功能，可以通過瀏覽器設置或選項菜單中的「清除瀏覽數據」或「清除緩存」來實現。此方法可以清除瀏覽器緩存、歷史記錄、下載記錄等。

③ 瀏覽器緩存可以清理嗎

問題一：怎麼樣清理瀏覽器緩存垃圾 使用瀏覽器會逐漸累積垃圾，導致計算機的運行過慢，因此保持日常性的清理是非常有必要的；
清理垃圾的操作可以分為瀏覽器本身清理或者採取電腦管家類的保護進行清理；

瀏覽器本身清理（以搜狗瀏覽器為例），點擊瀏覽器工具選項，進入工具管理，點擊清除瀏覽記錄，在彈出窗口界面勾選需要清理的記錄內容，點擊立即清除即可；

利用瀏覽器以外的安全防護軟體進行清理（以QQ管家為例），點擊清理垃圾，等待掃描垃圾，掃描完成後點擊立即清理完成清理即可。

問題二：IE瀏覽器怎麼清理緩存 操作方法：請您點擊任何一個網頁上方的「工具」，選擇「Internet選項」，然後彈出一個小窗口，以下是IE瀏覽器6.0、7.0、8.0的簡單說明。 IE6.0 工具――Internet選項――刪除Cookies、刪除文件(勾選刪除離線文件) IE7.0 工具――Internet選項――刪除――全部刪除(勾選「也刪除載入項存儲的文件和設置」) IE8.0 工具――Internet選項――刪除――勾選Internet臨時文件、cookie(不勾選保留收藏夾網站數據)，點擊刪除 下面是IE瀏覽器5個不同版本的操作圖，請您根據自己使用IE瀏覽器版本不同操作： IE6.0的瀏覽器： IE7.0的瀏覽器： IE8.0的瀏覽器： 搜狗(sogou)瀏覽器： 360瀏覽器： 下面補充一下IE9.0瀏覽器 點擊「刪除」，在打開的新窗口中取消勾選「保留收藏夾網站數據」，勾選其它選框，點擊「刪除」即可。 其他瀏覽器： 世界之窗(Theworld 3) 菜單欄 工具-----清除瀏覽記錄 選擇要清理的內容，點擊「立即清理」即可。 火狐瀏覽器(Firefox 4) 菜單欄 工具-------清空最近歷史記錄 彈出界面，單擊「詳細信息」 選擇要刪除的內容，選擇歷史記錄的時間，單擊「立即清除」即可。 360極速瀏覽器(360 chrome) 右側「扳手」圖標-------工具-------清除瀏覽數據 選擇要清除的內容和時間，單擊「清除瀏覽數據」即可。 網路瀏覽器 點擊右側齒輪狀圖標-------清除瀏覽記錄 彈出對話框 選擇需要清除的時間和內容，單擊「清除」即可。 谷哥瀏覽器(Google Chrome) 右側「扳手」圖標-------工具-------清除瀏覽數據 彈出對話框，選擇清除內容和時間，單擊「清除瀏覽數據」即可。 傲遊瀏覽器(Maxthon 2) 菜單欄 工具------清除記錄 彈出對話框 選擇你要清除的內容，單擊「開始清除」即可 Opera 11 工具欄 菜單-------設置--------刪除私人數據 彈出對話框，點擊「詳細選項」 選擇你要刪除的內容，單擊「刪除」即可 騰訊TT瀏覽器 菜單欄 工具-------清除瀏覽記錄 彈出對話框 點擊「全選」------「清除」即可。 蘋果瀏覽器(Safari) 點擊右側齒輪狀圖標--------勾選顯示菜單欄 菜單欄 編輯-------清空緩存 彈出確認對話框，點擊「清空」。 菜單欄 歷史記錄------清除歷史記錄 彈出對話框，點擊「清除」。 註：更多精彩教程請關注三聯軟體使用欄目

問題三：如何清除瀏覽器緩存？ 瀏覽器緩存（Browser Caching）是為了節約網路的資源加速瀏覽，瀏覽器在用戶磁碟上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟顯示文檔，這樣就可以加速頁面的閱覽。
清除緩存的方法：

IE瀏覽器：

打開IE，選擇「工具--internet選項」，切換到「高級」選項卡，找到「關閉瀏閥器時清空internet臨時文件夾」，並將其選中，確定即可；

Mozilla Firefox 瀏覽器：

a、單擊瀏覽器頂部的Tools（工具）菜單，並選擇Options（選項）；

b、單擊Privacy（隱私）；

c、單擊Cache（高速緩沖）旁邊的Clear（清空緩存）；

d、單擊OK（確定）；

Mozilla、Netscape瀏覽器：

a、注銷您的 AdSense帳戶。關閉所有其他打開的瀏覽器窗口；

b、單擊瀏覽器頂部的Edit（編輯）菜單，然後選擇Preferences（首選項）；

c、單擊Advanced（高級）旁邊的+；

d、單擊Advanced（高級）下面的Cache（高速緩存）；

e、單擊Clear Cache（清除高速緩存）；

f、單擊OK（確定）；

Safari 瀏覽器：

a、注銷您的 AdSense 帳戶。關閉所有其他打開的瀏覽器窗口；

b、打開瀏覽器工具欄中的Safari菜單；

c、選擇Empty Cache（清空緩存）；

d、單擊該對話框中的Empty（清空）。

問題四：瀏覽器緩存的臨時文件可以刪除嗎 可以，瀏覽器緩沖文件的作用是暫時保存網頁里觸素材，使下次打開相同網頁時速度會快一些。刪除後完全不會影響到使用。定期清理瀏覽器緩存可以釋放磁碟空間，是個好習慣。

問題五：清理IE緩存什麼意思對電腦有沒有用 每次上網打開的網頁在電腦上都會有記錄.這些記錄會佔用很大的空間.所以需要手動地刪除.
但是,如果你打開的網頁是你以前曾瀏覽過的,也就是IE緩存里有的,則打開的速度要快些.所以如果你刪除IE緩存,會影響打開網頁的速度.

因此,建議你過一段時間再刪除一次.

問題六：網路瀏覽器怎麼清理緩存 打開網路瀏覽器最新版本7.0，點擊右上角「三」菜單

問題七：如何徹底清除瀏覽器的緩存？ 最好卸載了重新安裝，徹底。
也可以換個好點的瀏覽器，我現在用的QQ瀏覽器清理緩存功能很好。

它是採用的國產單核瀏覽器，基於谷歌Chrome開源項目，速度是剛剛的。

用它瀏覽網頁的時候，可以瞬間開啟20多個網頁。我經常開視頻，在上面一點也沒有感覺卡，

純屬個人建議。供你參考。

問題八：能用JS或者前端的什麼方法實現清除瀏覽器緩存嗎 meta方法
不緩存

清理form表單的臨時緩存

其實form表單的緩存對於我們書寫還是有幫助的，一般情況不建議清理，但是有時候為了安全問題等，需要清理一下！

jquery ajax清除瀏覽器緩存

方式一：用ajax請求伺服器最新文件，並加上請求頭If-Modified-Since和Cache-Control,如下:

$.ajax({

url:'haorooms',

dataType:'json',

data:{},

beforeSend :function(xmlHttp){

xmlHttp.setRequestHeader(If-Modified-Since,0);

xmlHttp.setRequestHeader(Cache-Control,no-cache);

},

success:function(response){

操作

}

async:false

});

方法二，直接用cache:false,

$.ajax({

url:'haorooms',

dataType:'json',

data:{},

cache:false,

ifModified :true ,

success:function(response){

操作

}

async:false

});

方法三：用隨機數，隨機數也是避免緩存的一種很不錯的方法！

URL 參數後加上 ?ran= + Math.random(); 當然這里參數 ran可以任意取了

方法四：用隨機時間，和隨機數一樣。

在 URL 參數後加上 ?timestamp= + new Date().getTime();...>>

④ ☆前端優化：瀏覽器緩存技術介紹

在前端開發中，性能一直都是被大家所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。 其中提高網頁反應速度的一個方式就是使用緩存 。緩存技術一直一來在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， 因為如果不啟用強緩存的話，協商緩存根本沒有意義 。

如果資源已經被瀏覽器緩存下來，在緩存失效之前，再次請求時，默認會先檢查是否命中強緩存，如果強緩存命中則直接讀取緩存，如果強緩存沒有命中則發請求到伺服器檢查是否命中協商緩存，如果協商緩存命中，則告訴瀏覽器還是可以從緩存讀取，否則才從伺服器返回最新的資源。其瀏覽器判斷緩存的詳細流程圖，如下：