瀏覽器緩存機制分析

Sanchi 發布于2019-08-06 13:26 / 2588人閱讀

摘要：和前端相關的緩存一般都是指緩存，也就是瀏覽器緩存。緩存機制緩存一般分為強制緩存和協商緩存，接下來將分別介紹一下這兩個緩存機制。這兩種緩存機制可以同時存在，不過強制緩存的優先級高于協商緩存。

瀏覽器緩存 基礎概念

緩存無處不在，有客戶端緩存，服務端緩存，代理服務器緩存等等。和前端相關的緩存一般都是指http緩存，也就是瀏覽器緩存。

就是說ajax請求之后，會把請求的url和返回的響應結果保存在緩存中，當下一次調用ajax發送相同的請求時，瀏覽器會從緩存中把數據取出來，這是為了提高頁面的響應速度和用戶體驗，什么時候會出現這個現象呢，就是要這兩次的請求url和請求參數完全一樣的時候，瀏覽器就不會與服務器交互。

緩存的優缺點 優點

現在說一下緩存的好處，好處顯而易見嘛，就是說請求一些靜態資源，js，css，圖片這些，不會變化的資源，請求會變得更快，加快了客戶端加載網頁的速度，提高了頁面的響應速度，也減少了冗余數據的傳遞，節省了網絡帶寬流量，減少服務端的負擔，大大提高了網站性能。

缺點

但是缺點也顯而易見，客戶端和服務端交互的時候，服務端的數據雖然變了，但是頁面緩存沒有改變，對于相同的url，ajax提交過去以后，瀏覽器是從緩存中拿數據，這種情況肯定是不被允許的。

那么什么時候會觸發緩存呢，在這之前先說一下緩存機制吧。

緩存機制

緩存一般分為強制緩存和協商緩存，接下來將分別介紹一下這兩個緩存機制。

強制緩存

就是緩存中已經有了請求數據的時候，客戶端直接從緩存中獲取數據，只有當緩存中沒有請求數據的時候，客戶端才會從服務端拿取數據。

協商緩存

也成為對比緩存，就是說客戶端會從緩存中獲取到一個緩存數據的標識，根據這個標識會請求服務端驗證是否失效，如果沒有失效，服務端會返回304，這時候客戶端就直接從緩存中取數據，如果失效了，服務端會返回新的數據。

這兩種緩存機制可以同時存在，不過強制緩存的優先級高于協商緩存。

現在我們簡單的了解了一下緩存機制的原理，該說一下什么時候會觸發緩存，服務端是如何判斷緩存是否失效呢？大家都知道，發送請求的時候會有請求數據和響應數據，這個被稱為報文，報文中包含首部header和主體部分body。與緩存相關的規則信息就包含在header中。body中的內容就是http請求真正要傳輸的數據。舉個http報文的頭部例子

現在我們對報文中出現的與緩存有關的信息分析一下

強制緩存

服務器響應的header中會用兩個字段來表明，Expires和Cache-Control。

Expires

Expires的值是服務端返回的數據到期時間。當再次請求時的請求時間小于返回的此時間，則直接使用緩存數據，但是因為客戶端和服務端的時間可能有誤差，所以這個緩存命中可能會有誤差，另一方面，expires是http1.0的產物，所以現在大多數都使用Cache-Control

Cache-Control

Cache-Control有很多產物，不同的屬性代表的意義不同。

private：客戶端可以緩存

public：客戶端和服務器可以緩存

max-age=t：緩存內容在t秒后失效

no-cache：需要使用協商緩存來驗證緩存數據

no-store：所有內容不使用緩存

協商緩存

協商緩存需要判斷是否可以用緩存，瀏覽器第一次請求數據的時候，服務器會將緩存標識與數據一起響應給客戶端，客戶端將他們備份到緩存中，再次請求時，客戶端會將緩存中的標識發送給服務器，服務器根據此標識判斷是否失效，如果沒有失效，服務端返回304狀態碼，瀏覽器拿到此狀態嗎就可以直接使用緩存數據了。對于協商緩存來說，緩存標識很重要，對于理解協商緩存，這是重點。

接下來介紹一下協商緩存的緩存方案

Last-Modified Last-Modified

服務端在響應請求時，會返回資源的最后修改時間

If-Modified-Since

客戶端再次請求服務端的時候，請求頭會包含這個字段，后面跟著在緩存中獲取的資源的最后修改時間。服務端收到請求發現此請求頭中有If-Modified-Since字段，會與被請求資源的最后修改時間進行對比，如果一致則會返回304和響應報文頭，瀏覽器從緩存中獲取數據即可。從字面上看，就是說從某個時間節點開始看，是否被修改了，如果被修改了，就返回整個數據和200 OK，如果沒有被修改，服務端只要返回響應頭報文，304 Not Modified.

If-Unmodified-Since

和If-Modified-Since相反，就是說從某個時間點開始看，是否沒有被修改.如果沒有被修改，就返回整個數據和200 OK，如果被修改了，不傳輸和返回412 Precondition failed (預處理錯誤)

If-Modified-Since和If-Unmodified-Since區別就是一個是修改了返回數據一個是沒修改返回數據。

Last-Modified也有缺點，就是說服務端的資源只是改了下修改時間，但是其實里面的內容并沒有改變，會因為Last-Modified發生了改變而返回整個數據，為了解決這個問題，http1.1推出了Etag

Etag Etag

服務端響應請求時，通過此字段告訴客戶端當前資源在服務端生成的唯一標識（生成規則由服務端決定）

If-None-Match

再次請求服務端的時候，客戶端的請求報文頭部會包含此字段，后面的值是從緩存中獲取的標識，服務端接收到報文后發現If-None-Match則與被請求的資源的唯一標識對比。如果相同，說明資源不用修改，則響應header，客戶端直接從緩存中獲取數據，返回狀態碼304，如果不同，說明資源被改過，返回整個數據，200 OK。

但是實際應用中由于Etag的計算是使用算法計算出來的，而算法會占用服務端的資源，所有服務端的資源都是寶貴的，所以很少使用Etag。

現在順便說一下不同的刷新的請求執行過程哈

瀏覽器直接輸入url，回車
瀏覽器發現緩存中有這個文件了，不用繼續請求了，直接去緩存中拿（最快）

F5
告訴瀏覽器，去服務端看下文件是否過期了，于是瀏覽器發了一個請求帶上If-Modified-Since

Ctrl+F5
告訴瀏覽器，先把緩存刪了，再去服務端請求完整的資源文件過來，于是瀏覽器就完成了強制更新的操作

如果不想使用緩存怎么辦呢，接下來說一下解決方法

解決方法

在ajax發送請求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

在服務端加 header(“Cache-Control: no-cache, must-revalidate”);

在ajax發送請求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

在 Ajax 的 URL 參數后加上 "?fresh=" + Math.random(); //當然這里參數 fresh 可以任意取了

第五種方法和第四種類似，在 URL 參數后加上 "?timestamp=" + new Date().getTime();

用POST替代GET：不推薦

jQuery提供一個防止ajax使用緩存的方法：

修改load 加載的url地址，如在url 多加個時間參數就可以：

function loadEventInfoPage(eventId){

    $.ajaxSetup ({ 
       cache: true // AJAX cache  下面加上時間后load的頁面中的js、css圖片等都會重新加載，   

         //加上這句action會重新加載，但是js、css、圖片等會走緩存 
    }); 
    $("#showEventInfo").load(ctx + "/custEvents/viewEvent.action",  {"complaint.Id":eventId, "tt":(new Date()).getTime()},function(){}) 
}

9.設置html的緩存

云服務器 GPU云服務器三級緩存機制 cdn緩存機制 php緩存機制 android緩存機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61907.html

H5 緩存機制淺析 - 移動端 Web 加載性能優化

摘要：根據標準，到目前為止，一共有種緩存機制，有些是之前已有，有些是才新加入的。首次請求緩存有效期內請求緩存過期后請求一般瀏覽器會將緩存記錄及緩存文件存在本地文件夾中。騰訊 Bugly 特約作者：賀輝超 1. H5 緩存機制介紹 H5，即 HTML5，是新一代的 HTML 標準，加入很多新的特性。離線存儲（也可稱為緩存機制）是其中一個非常重要的特性。H5 引入的離線存儲，這意味著 web ...

alin 2019-08-06 13:14 評論0 收藏0
JavaScript 啟動性能瓶頸分析與解決方案

摘要：啟動性能瓶頸分析與解決方案翻譯自的，從屬于筆者的前端入門與工程實踐。我們必須要清醒地認識到全面評測以挖掘出真正性能瓶頸的重要性。這可能是最佳的方式了，類似于這樣的模式鼓勵基于路由的分組，目前被與廣泛使用。 JavaScript 啟動性能瓶頸分析與解決方案翻譯自 Addy Osmani 的 JavaScript Start-up Performance，從屬于筆者的Web 前端入門與工...

SQC 2019-08-20 14:15 評論0 收藏0
Node.js模塊化機制原理探究

摘要：要想讓模塊再次運行，必須清除緩存。用戶自己編寫的模塊，稱為文件模塊。并且和指向了同一個模塊對象。模塊路徑這是在定位文件模塊的具體文件時指定的查找策略，具體表現為一個路徑組成的數組。前言 Node應用是由模塊組成的，Node遵循了CommonJS的模塊規范，來隔離每個模塊的作用域，使每個模塊在它自身的命名空間中執行。 CommonJS規范的主要內容：模塊必須通過 module.exp...

aikin 2019-08-20 14:20 評論0 收藏0
高并發

摘要：表示的是兩個，當其中任意一個計算完并發編程之是線程安全并且高效的，在并發編程中經常可見它的使用，在開始分析它的高并發實現機制前，先講講廢話，看看它是如何被引入的。電商秒殺和搶購，是兩個比較典型的互聯網高并發場景。干貨：深度剖析分布式搜索引擎設計分布式，高可用，和機器學習一樣，最近幾年被提及得最多的名詞，聽名字多牛逼，來，我們一步一步來擊破前兩個名詞，今天我們首先來說說分布式。探究...

supernavy 2019-07-25 14:10 評論0 收藏0