瀏覽器快取

今天我們來說一下瀏覽器快取的問題，快取可以減少網路io的消耗，提高訪問速度。瀏覽器快取是一種操作簡單、效果顯著的前端效能優化手段。

關於快取的頭部字段包括：

cache-control(快取頭)

可快取性

public： 即使它有相關聯的http身份驗證，甚至響應狀態**通常無法快取，也可以快取響應。大多數情況下，public不是必需的，因為明確的快取資訊(例如max-age)已表示響應是可以快取的。

private： 瀏覽器可以快取private響應。不過，這些響應通常只為單個使用者快取，因此不允許任何中間快取對其進行快取。例如，使用者的瀏覽器可以快取包含私人資訊的html網頁，但cdn卻不能進行快取。

到期max-age=(seconds) 指令指定從請求的時間開始，允許獲取的響應被重用的最長時間(單位：秒)。例如，"max-age=60"表示可在接下來的60秒快取和重用響應。

s-maxage=(seconds)：同max-age，只用於共享快取(比如cdn快取) 比如，當s-maxage=60時，在這60秒鐘，即使更新了cdn的內容，瀏覽器也不會進行請求。也就是說max-age用與普通快取，而s-maxage用於**快取，如果存在s-maxage，則會覆蓋掉max-age和expiresheader。

max-stale=(seconds) 為發起端設定，即使快取已經到期，但在max-stale設定的時間內還可以使用過期的快取。

重新驗證

must-revalidate快取必須在使用之前驗證舊資源的狀態，並且不可使用過期資源。

proxy-revalidate與must-revalidate作用相同，但它僅適用於共享快取(例如**)，並被私有快取忽略。

其他no-transform不得對資源進行轉換或轉變。content-encoding, content-range, content-type等http頭不能由**修改。例如，非透明**可以對影象格式進行轉換，以便節省快取空間或者減少緩慢鏈路上的流量。 no-transform指令不允許這樣做。

pragma

當該字段值為no-cache的時候。會告訴瀏覽器不要對該資源快取，及每一次都得向伺服器傳送一次響應。

res.serheader('pragma','no-cache')                                //禁止快取

res.setheader('cache-control','public,max-age=120') //2分鐘
複製**

expires

快取過期時間，用來指定資源到期的時間，是伺服器端的具體的時間點。也就是說，expires = max-age + 請求時間，需要和last-modified結合使用。但在上面我們提到過，cache-control的優先順序更高。expires是web伺服器響應訊息頭欄位，在響應http請求時告訴瀏覽器在過期時間前可以直接從瀏覽器緩訪問資料，而無需再次請求。

last-modified 上次修改時間

伺服器端檔案的最後修改時間，需要和catch-control共同使用，是檢查伺服器資源是否更新的一種方式。當瀏覽器再次進行請求時，會向伺服器傳送if-modified-since報頭，詢問last-modified時間點之後資源是否被修改過。如果沒有修改，則返回碼為304，使用快取；如果修改過，則再次去伺服器請求資源，返回碼和首次請求相同為200，資源為伺服器最新資源。

etag 資料簽名

根據試題內容生成一段雜湊字串，標識資源的狀態，由伺服器產生。瀏覽器會將這串字串傳回伺服器，驗證資源是否已被修改，如果沒有修改，過程如下：

使用etag可以解決last-modified存在的一些問題：

根據查到的資料顯示，快取頭的優先順序是這樣的：

pragma > cache-control > expires > etag > last-modified

複製**

由於圖上都是英文，我猜像我這樣的菜鳥都看不懂，這裡藉資料來解釋一下：

當我們的資源內容不可復用時，直接為cache-control設定no-store，拒絕一切形式的快取；否則考慮是否每次都需要向伺服器進行快取有效確認，如果需要，那麼設cache-control的值為no-cache；否則考慮該資源是否可以被**伺服器快取，根據其結果決定是設定為private還是public；然後考慮該資源的過期時間，設定對應的max-age和s-maxage值；最後，配置協商快取需要用到的etag、last-modified等引數。

確保伺服器提供驗證令牌(etag)：有了驗證令牌，當伺服器上的資源未發生變化時，就不需要傳送相同的位元組。

確定中間快取可以快取哪些資源：對所有使用者的響應完全相同的資源非常適合由cdn以及其他中間快取進行快取。

為每個資源確定最佳快取週期：不同的資源可能有不同的更新要求。為每個資源審核並確定合適的max-age。

文章的最後我們還要說一下記憶體快取(from memory cache)和硬碟快取(from disk cache)。

記憶體快取

記憶體快取有兩個特點，分別是快速讀取和時效性。

硬碟快取

硬碟快取- 則是將快取直接寫入硬碟檔案中，讀取快取需要對該快取存放的硬碟檔案進行i/o操作，然後重新解析該快取內容，讀取複雜，速度比記憶體快取慢。

那麼哪些檔案會被放入記憶體中呢？

事實上，這個劃分規則，一直以來是沒有定論的。不過想想也可以理解，記憶體時有限的，很多時候需要先考慮即時呈現的記憶體餘量，再根據具體的情況決定分配給記憶體和磁碟的資源量的比重——資源存放的位置具有一定的隨機性。

雖然劃分規則沒有定論，但根據日常開發中觀察的結果，我們至少可以總結出這樣的規律：資源存不存記憶體，瀏覽器秉承的是「節約原則」。我們發現，base64格式的，幾乎永遠可以被塞進memory cache，這可以視作瀏覽器為節省渲染開銷的「自保行為」；此外，體積不大的 js、css 檔案，也有較大地被寫入記憶體的機率——相比之下，較大的 js、css 檔案就沒有這個待遇了，記憶體資源是有限的，它們往往被直接甩進磁碟。

瀏覽器讀取快取的順序為memory –> disk

好啦，著急忙慌整完了，正好零點，碎覺碎覺。 明天還要考試，關老爺保佑！！！

參考文章： developers.google.com/web/fundame…

快取 瀏覽器快取

瀏覽器快取 brower caching 是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存，當訪問者再次訪問同一頁面時，瀏覽器就可以直接從本地磁碟載入文件 1 瀏覽器第一次請求時，會發出一組 http 頭，用來指導瀏覽器如何進行快取。伺服器規定乙個資源是否要進行快取，主要由響應頭中的expires...

瀏覽器快取

1.為什麼使用瀏覽器快取 以前了解的動態指令碼加速，或者動態內容快取之類，他們的原理都是避免伺服器重複計算，結果仍保留在伺服器端，這樣獲取資料還得從伺服器檢索然後傳送到使用者瀏覽器，如果我們把這些結果放在瀏覽器中，就省去了伺服器的查詢和網路傳輸，瀏覽器快取很好的實現了這個功能 2.瀏覽器快取存放在哪...

瀏覽器快取

瀏覽器快取知識歸納 瀏覽器快取是提公升網頁效能的一大利器，但是，也是一把雙刃劍。利用的好網頁的效能會有大幅度提公升，伺服器的壓力也會減小。利用的不好，也會遇到很多的問題。本文結合瀏覽器快取的知識，結合真實案例進行分析，希望對讀者有所幫助。瀏覽器快取分類 瀏覽器快取分為強快取和協商快取，瀏覽器載入乙個...