【前端 · 面试 】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 后面添加的字符串须要每次都改变，因此，咱们通常选择添加时间戳。

总结

本文就是对前面几天的学习作一个验证，但愿对你有所帮助！

~

~本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

你们好，我是〖编程三昧〗的做者 隐逸王，个人公众号是『编程三昧』，欢迎关注，但愿你们多多指教！

你来，怀揣指望，我有墨香相迎！ 你归，不管得失，惟以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！