[前端 · 面试 ]HTTP 总结（十）—— 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);