瀏覽器快取機制

2021-09-17 08:49:38 字數 1279 閱讀 8054

使用者首次請求伺服器,如果伺服器端設定了響應頭cache-control,如:

ctx.set("cache-control","max-age=60*60*24");

//表示讓瀏覽器快取本次請求的靜態檔案,24小時內有效

下次再請求這個靜態檔案時,不必請求伺服器,直接從瀏覽器的快取中獲取該靜態檔案。

當強制快取(cache-control)失效,或者沒有設定強制快取時。對比快取就發生作用了:

首次請求伺服器,對比快取和強制快取是一起設定的,

//檔案資訊物件

const stat = fs.statsync('./a.js');

//獲取該靜態檔案的唯一標識,如果該檔案修改,標識會改變

const etag = stat.mtime.gettime().tostring(16);

//設定響應頭etag

ctx.set('etag',etag);

//瀏覽器端的請求頭if-none-match會自動等於響應頭etag的值

//獲取檔案資訊物件

const stat = fs.statsync('./a.js');

//獲取檔案最近一次修改的utc時間(世界標準時間)

const lm = stat.mtime.toutcstring();

//設定響應頭last-modified

ctx.set('last-modified',lm);

//瀏覽器端的請求頭if-modified-since會自動等於響應頭last-modified的值

瀏覽器如何使用對比快取?

當沒有強制快取時,瀏覽器傳送請求到伺服器,伺服器需做以下判斷:

const stat = fs.statsync('./a.js');

const inm = ctx.get("if-none-match"); //獲取請求頭if-none-match的值

const etag = stat.mtime.gettime().tostring(16); //獲取檔案的唯一標識

const ims = ctx.get("if-modified-since"); //獲取請求頭if-modified-since的值

const lm = stat.mtime.toutcstring(); //獲取檔案的最近修改utc時間

if(etag===inm && lm===ims)else

瀏覽器快取機制

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...

瀏覽器快取機制

當我們瀏覽乙個頁面發現有異常時,通常考慮的就是書不是瀏覽器做了快取呢,按ctrl f5重新請求一次就能請求到沒有快取的頁面,這個是為什麼呢。首先,ctrl f5組合鍵重新整理頁面,那麼瀏覽器會直接向目標url傳送請求,而不再使用瀏覽器快取的資料。其次,當請求到達伺服器端依然有可能出現使用伺服器端的資...

瀏覽器快取機制

瀏覽器快取機制 瀏覽器快取機制,其實主要就是 協議定義的快取機制 如 expires cache control 等 但是也有非 協議定義的快取機制,如使用 html meta 標籤,web 開發者可以在 html 頁面的節點中加入 標籤,如下 上述 的作用是告訴瀏覽器當前頁面不被快取,每次訪問都需...