[前端 · 面試 ]HTTP 總結（十）—— HTTP 快取應用

程式設計三昧發表於2021-08-10
前端面試HTTP快取

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

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

前端·面試·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 後面新增的字串需要每次都改變，所以，我們一般選擇新增時間戳。

總結

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

~

~本文完，感謝閱讀！

~

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

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

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

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

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章