【前端 · 面試 】HTTP 總結(十)—— HTTP 快取應用

隱逸王發表於2021-08-10

最近我在做前端面試題總結系列,感興趣的朋友可以新增關注,歡迎指正、交流。

爭取每個知識點能夠多總結一些,至少要做到在面試時,針對每個知識點都可以侃起來,不至於啞火。

前端·面試·http總結.012

前言

通過前面幾篇內容的學習,我們知道 HTTP 快取分為兩種:

  • 強快取
  • 協商快取

並且也知道了它們的控制屬性,總結起來就是下面這個圖:

HTTP 快取.快取分類

今天我們就來動手實踐一下,看看 HTTP 快取到底是如何工作的。

搭建服務

首先,我們使用 Express 模組來搭建一個簡單的靜態資源服務,程式碼如下:

const express = require("express");
const app = express();

var options = {
    dotfiles: "ignore",
    etag: true,
    extensions: ["htm", "html", "js", "css"],
    index: false,
    maxAge: 1000 * 60,
    expires: 2000,
    redirect: false,
    setHeaders: function (res, path, stat) {
        res.set("x-timestamp", Date.now());
        // 設定資源過期時間
        res.set("Expires", new Date(Date.now() + 100000).toGMTString());
    },
};

app.use(express.static("./views", options));
app.listen(1991);

靜態資原始檔結構如下圖:

image-20210810205114401

載入結果

第一次載入上來的結果如下:

image-20210810205633049

重新重新整理一次後,得到的結果如下:

image-20210810205957902

可以看到,第二次的結果和我們之前對強快取和協商快取的分析是一致的。

不知道大家有沒有這樣一個疑問:那要是我確實想要重新從伺服器獲取資源,而不想使用快取,該怎麼實現呢?

強制獲取服務端資源

藉助瀏覽器

由於快取資源要麼存在瀏覽器快取中,要麼存在本地硬碟中,我們可以通過瀏覽器自帶的功能來強制獲取服務端資源,比如右鍵重新整理圖示,選擇如下圖所示的後兩項都可:

image-20210810211034135

給 URL 新增標識

比如,給正常的 URL 後面加上隨便一串數字,得到的結果如下:

image-20210810211530323

因為 URL 後面新增的字串需要每次都改變,所以,我們一般選擇新增時間戳。

總結

本文就是對前面幾天的學習做一個驗證,希望對你有所幫助!

~

~本文完,感謝閱讀!

~

學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!

大家好,我是〖程式設計三昧〗的作者 隱逸王,我的公眾號是『程式設計三昧』,歡迎關注,希望大家多多指教!

你來,懷揣期望,我有墨香相迎! 你歸,無論得失,唯以餘韻相贈!

知識與技能並重,內力和外功兼修,理論和實踐兩手都要抓、兩手都要硬!

相關文章