【前端 · 面試 】HTTP 總結（十）—— HTTP 緩存應用

這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰

最近我在作前端面試題總結系列，感興趣的朋友能夠添加關注，歡迎指正、交流。

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

前言

經過前面幾篇內容的學習，咱們知道 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 後面添加的字符串須要每次都改變，因此，咱們通常選擇添加時間戳。

總結

本文就是對前面幾天的學習作一個驗證，但願對你有所幫助！

~

~本文完，感謝閱讀！

~

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

你們好，我是〖編程三昧〗的做者 隱逸王，個人公衆號是『編程三昧』，歡迎關注，但願你們多多指教！

你來，懷揣指望，我有墨香相迎！ 你歸，不管得失，惟以餘韻相贈！

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