【前端 · 面試 】HTTP 總結（十）—— 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);

靜態資源文件結構如下圖：

加載結果

第一次加載上來的結果如下：

重新刷新一次後，得到的結果如下：

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

不知道大家有沒有這樣一個疑問：那要是我確實想要重新從服務器獲取資源，而不想使用緩存，該怎麼實現呢？

強制獲取服務端資源

藉助瀏覽器

由於緩存資源要麼存在瀏覽器緩存中，要麼存在本地硬盤中，我們可以通過瀏覽器自帶的功能來強制獲取服務端資源，比如右鍵刷新圖標，選擇如下圖所示的後兩項都可：

給 URL 添加標識

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

因爲 URL 後面添加的字符串需要每次都改變，所以，我們一般選擇添加時間戳。

總結

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

~

~本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖編程三昧〗的作者 隱逸王，我的公衆號是『編程三昧』，歡迎關注，希望大家多多指教！

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

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