瀏覽器的緩存機制

aisuhua 發布于2019-08-06 13:45 / 3405人閱讀

摘要：通常瀏覽器緩存策略分為兩種強緩存和協商緩存基本原理瀏覽器在加載資源時，根據請求頭的和判斷是否命中強緩存，如果命中則直接從緩存讀取資源，不會向服務器發起請求。并且受限于本地時間，如果修改了本地事件，如果修改了本地時間，可能造成緩存失效。

瀏覽器的緩存機制

? 在前端開發中，性能一直是一個非常重要的部分，其中一個非常重要的判斷標準就是一個網頁打開的速度，其中一個提高網頁反應速度的非常重要的方式就是利用瀏覽器的緩存機制，良好的緩存策略可以降低資源的重復加載提高網頁的整體加載速度，減少請求的延遲，降低網絡負荷。

通常瀏覽器緩存策略分為兩種：強緩存和協商緩存

基本原理

瀏覽器在加載資源時，根據請求頭的Expires 和 cache-control判斷是否命中強緩存，如果命中則直接從緩存讀取資源，不會向服務器發起請求。

如果強緩存沒有命中，瀏覽器一定會向服務器發起請求，通過last-modefied 和Etag去判斷資源是否命中協商緩存，如果命中代表資源沒有更新，服務器會返回304，讀取緩存中的資源，如果沒有命中，則代表資源有更新，服務器會返回200，從服務器加載資源。

強緩存和協商緩存的異同

同：如果兩種緩存方式都未命中，則都需要從服務端加載資源

異：強緩存命中不會向服務器發起請求，協商緩存需要向服務器發起請求

強緩存

強緩存通過Expires 和 Cache-Control 兩種響應頭實現。

1. Expires

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 出現于 HTTP / 1.0 ，表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT 后過期，需要再次請求。并且受限于本地時間，如果修改了本地事件，如果修改了本地時間，可能造成緩存失效。

2. Cache-Control

Cache-Control 出現于 HTTP / 1.1，優先級高于 Expires ,表示的是相對時間。

Cache-Control: max-age=315360000

協商緩存

協商緩存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】來管理的。

1. Last-Modefied & If-Modified-Since

Last-Modefied代表服務器端文件的最后修改時間，當瀏覽器發起請求時，會向服務端發送If-modefied-Since報頭，詢問在Last-Modefied之后有沒有被修改過。如果沒有修改過，則返回304使用緩存，如果修改過，則向服務器請求資源，返回200。

但是如果本地打開緩存文件，會導致Last-Modefied被修改，所以在 HTTP/1.1中引入 Etag.

2. Etag & & If-None-Match

Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的唯一標識符，能夠更加準確的控制緩存。當發送請求是If-None-Match會將上次的Etag發送給服務器進行判斷是否有更新，如果有更新，則會請求新的資源。

ETag的優先級比Last-Modified更高

具體為什么要用ETag，主要出于下面幾種情況考慮：

一些文件也許會周期性的更改，但是他的內容并不改變(僅僅改變的修改時間)，這個時候我們并不希望客戶端認為這個文件被修改了，而重新GET；

某些文件修改非常頻繁，比如在秒以下的時間內進行修改，(比方說1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；

某些服務器不能精確的得到文件的最后修改時間。

如何選擇合適的緩存策略

大致的順序

Cache-Control —— 請求服務器之前

Expires —— 請求服務器之前

If-None-Match (Etag) —— 請求服務器

If-Modified-Since (Last-Modified) —— 請求服務器

協商緩存需要配合強緩存使用，如果不啟用強緩存的話，協商緩存根本沒有意義

大部分web服務器都默認開啟協商緩存，而且是同時啟用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】

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

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

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

Web緩存相關知識整理

摘要：緩存緩存，也叫網關緩存反向代理緩存。瀏覽器先向網關發起請求，網關服務器后面對應著一臺或多臺負載均衡源服務器，會根據它們的負載請求，動態將請求轉發到合適的源服務器上。雖然這種架構負載均衡源服務器之間的緩存沒法共享，但卻擁有更好的處擴展性。一、前言? 工作上遇到一個這樣的需求，一個H5頁面在APP端，如果勾選已讀狀態，則下次打開該鏈接，會跳過此頁面。用到了HTML5 的本地存儲 API ...

rickchen 2019-08-06 13:23 評論0 收藏0
H5 緩存機制淺析 - 移動端 Web 加載性能優化

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

alin 2019-08-06 13:14 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

jsummer 2019-08-06 13:37 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

godruoyi 2019-08-16 13:43 評論0 收藏0
瀏覽器的緩存機制

摘要：從瀏覽器角度來看，整個就是一個源服務器，從這個層面來說，瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。如果命中，則返回，告訴瀏覽器資源未更新，可使用本地的緩存。緩存類型緩存在宏觀上可以分成兩類：私有緩存和共享緩存。共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。微觀上可以分下面幾類：瀏覽器緩存緩存存在的意義就是當用戶點擊back按...

LeanCloud 2019-08-06 13:41 評論0 收藏0