這次我們來講一下關於前端緩存的問題。-----歡迎點關注！！！

首先，開局我畫了一張圖，你會對文章有一個大局了解。

今天講的是前端緩存。

前端緩存有3大種：如圖，分為HTTP緩存、瀏覽器緩存、應用程序緩存。

HTTP緩存

我們先來看HTTP緩存：（做下了解）

分為強緩存與協商緩存。

首先看強緩存：

強緩存之Expires：

  • 值為服務端返回的到期時間，即下一次請求時，請求時間小於服務端返回的到期時間，直接使用緩存數據；
  • 到期時間是由服務端生成的，客戶端時間跟服務端時間可能存在誤差，這就會導致緩存命中的誤差；
  • 被Cache-Control替代；

強緩存之Cache-Control：

參數

說明

public

所有內容都將被緩存(客戶端和代理伺服器都可緩存)

private

內容只緩存到私有緩存中(僅客戶端可以緩存，代理伺服器不可緩存)

no-cache

必須先與伺服器確認返回的響應是否被更改，然後才能使用該響應來滿足後續對同一個網址的請求。因此，如果存在合適的驗證令牌 (ETag)，no-cache 會發起往返通信來驗證緩存的響應，如果資源未被更改，可以避免下載。

no-store

所有內容都不會被緩存到緩存或 Internet 臨時文件中

must-revalidation/proxy-revalidation

如果緩存的內容失效，請求必須發送到伺服器/代理以進行重新驗證

max-age=xxx

緩存的內容將在 xxx 秒後失效, 這個選項只在HTTP 1.1可用, 並如果和Last-Modified一起使用時, 優先順序較高

來舉個栗子：

圖中Cache-Control僅指定了max-age，所以默認為private，緩存時間為31536000秒（365天）

也就是說，在365天內再次請求這條數據，都會直接獲取緩存資料庫中的。

協商緩存：（相當於就是瀏覽器與伺服器通過一個值作為更新flag，一個協商一個判斷）

協商緩存之Etag/If-None-Match：

  1. 當瀏覽器請求伺服器的某項資源（A）時，伺服器會根據A算出一個哈希值，並通過Etag返回給瀏覽器，瀏覽器把ETAG和資源A同時緩存到本地。
  2. 當下次向伺服器請求該資源時，會通過If-None-Match把ETAG發送給伺服器。
  3. 伺服器再次計算A的哈希值並和瀏覽器的返回值作比較，如果A發生了變化就把A返回給瀏覽器（返回值200）,如果未發生變化就返回瀏覽器304（未修改）

協商緩存之Last-Modified/If-Modified-Since：

  1. 在瀏覽器請求伺服器的某項資源時，返回資源的同時還有一個Last-Modified的屬性標記此文件在伺服器端的最後修改時間；
  2. 瀏覽器第二次訪問該資源時，會向伺服器傳送 If-Modified-Since報頭，詢問該時間之後文件是否被修改過；
  3. 如果伺服器的資源沒有變化，則時間一致，返回304的狀態嗎，瀏覽器使用本地緩存；
  4. 如果時間不一致，返回200，顯示新文件並緩存。

那麼Etag和Last-Modified，他們之間有什麼區別呢？？？

  • Etag是標識傳輸，Last-Modified是時間傳輸;
  • Etag的優先順序高於Last-Modified;
  • Last-modified標註的最後修改時間只能精確到秒，如果文件在1秒以內被多次修改，它不能準確標註文件的最後修改時間；
  • 如果文件定期生成，但內容沒有任何變化，但是last-modified卻改變了，導致沒法使用緩存；
  • 有可能存在伺服器沒有準確獲取文件修改時間，或與代理伺服器時間不一致的情況；
  • etag每次服務端生成都需要進行讀寫操作，而last-modified只需要讀取操作，etag消耗更大些；

各有優劣！

那強緩存與協商緩存，他們的規則分別是什麼？

強緩存規則：

  • 已失效時，請求伺服器，伺服器返回數據和緩存規則，客戶端將數據和緩存規則存入緩存資料庫；
  • 未失效時，請求緩存資料庫，返回數據並渲染；

協商緩存規則：

  • 先到緩存資料庫中獲取標識Etag/Last-Modified，
  • 再通過If-None-Match/If-Modified-Since欄位帶上緩存標識請求伺服器，伺服器判斷內容是否失效；

這兩種緩存的執行流程是怎麼樣的？

  • 強緩存未失效，從緩存中讀取數據，cache-control優先順序高於Expires；
  • 強緩存已失效，執行協商緩存，Etag的優先順序高於last-Modified；
  • 緩存未失效從緩存中讀取數據返回304狀態碼；
  • 緩存已失效返回資源和200狀態碼；

怎麼清除緩存？

瀏覽器默認會緩存圖片，css和js等靜態資源，所以開發環境下經常會因為強緩存導致資源沒有及時更新而看不到最新的效果，需要清除緩存可以使用一下幾種方法：

  1. 直接ctrl+f5，這個辦法能解決頁面直接引用的資源更新的問題；
  2. 使用ctrl+shift+delete清除緩存；
  3. 如果用的是chrome，可以F12在network那裡把緩存給禁掉，選中「disable Cache」：
  4. 或者給資源文件加一個時間戳；
  5. 或者禁止修改html中的緩存欄位為禁止使用；
  6. 或者在谷歌瀏覽器刷新按鈕上，點擊右鍵，選擇「清空緩存並硬性重新載入」；

瀏覽器緩存

然後是瀏覽器緩存：（這個前端很多時候會用到）

有本地小容量存儲與本地大容量存儲

小容量的Cookie：

一般用於以下場景：

  1. 記住用戶名密碼
  2. 歡迎語

小容量的LocalStorage：

記錄後只要不手動清除就會一直存在。

小容量的SessionStorage：

僅在本次會話時有效。關閉當然窗口後就沒有了。

Storage的API如下：（localStorage為例，sessionStorage一樣）

保存數據：(3種寫法均可)

寫法1：

localStorage.setItem("key",value)

寫法2：

localStorage["key"]=1

寫法3：

localStorage.key=1

讀取數據：(相對也有3種)

寫法1：

var value=localStorage.getItem("key")

寫法2：

var value=localStorage["key"]

寫法3：

var value=localStorage.key

刪除單個數據：

localStorage.removeItem(key);

刪除所有數據：

localStorage.clear();

得到某個索引的key：

localStorage.key(index);

比較一下Cookie、LocalStorage、sessionStorage的異同：

  • cookie會在在同源的http請求中攜帶，不能超過4K，參與和伺服器交互；
  • sessionStorge和locaStorage保存數據在本地，限制最多5M，不參與和伺服器交互；
  • sessionStorage僅在當前窗口關閉前有效；
  • localstorage會一直保存在瀏覽器中，除非手動刪除；
  • cookie在設置過期時間之前一直有效，不設置過期時間窗口關閉則清除；
  • sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面，
  • localstorage和cookie在所有同源窗口中共享

本地大容量存儲之WebSql：

表保存數據，用sql操作資料庫（寫的是sql語句，懂mysql資料庫的完全不在話下）

創建表：

create table if not exists product(id integer primary key autoincrement,name text not null,price double);

添加一條數據：

insert into product(name,price) values(斗戰聖皇,1.2);

insert into product(name,price) values(布衣神探：最後的證據,0.9);

刪除一條數據：

delete from product where id=2;

更新一條數據：

update product set name=斗戰聖皇第二部,price=0.99 where id=1;

查詢表格：

select * from product;

刪除表格：

drop table IF EXISTS product;

本地大容量存儲之IndexDB：

保存的是對象類型的數據

  • open()打開或創建資料庫
  • deleteDatabase()刪除資料庫；
  • transaction()打開事物
  • add()添加數據
  • get()查找數據
  • delete()根據ID刪除數據
  • clear()清除全部數據

應用程序緩存

分為應用緩存和PWA

什麼是應用緩存？

頁面基本結構：

  1. html標籤上配置manifest文件，文件後綴.appcache；
  2. manifest 需要配置 MIME-type，即 "text/cache-manifest"。必須在 web 伺服器上進行配置，不同伺服器不一樣；如tomcat 需要修改conf/web.xml配置文件，添加：<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>
  3. manifest文件的格式個配置，分三部分，緩存文件，不緩存文件，頁面無法訪問時的回退頁面；CACHE MANIFEST/theme.htmlNETWORK:login.phpFALLBACK:/html/ /offline.html

舉個栗子：

有網路時：

什麼是PWA？

先了解APP和web網頁存在的一些不足：

APP應用存在的不足：

  • 開發成本高（IOS和安卓）
  • 軟體上線需要審核
  • 版本更新需要上傳到應用商店
  • 想使用APP必須下載

web網頁存在的不足：

  • 手機桌面入口不夠便捷，需要記住URL或加入書籤
  • 不能像APP一樣推送消息

PWA彌補了APP和web網頁存在的一些缺點：

  • 是一個web網頁應用
  • 可以添加至主屏幕，點擊主屏幕的圖標可以實現啟用動畫以及隱藏地址欄
  • 實現了離線緩存功能，即使手機沒有網路，依然可以實現一些離線功能
  • 實現了消息推送

一個簡單的PWA栗子：

視頻例子：

視頻封面

00:37

微信號：migufe

Web前端Talk，你身邊的前端助手，值得期待


推薦閱讀：
相关文章