【前端 · 面试 】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);

静态资源文件结构如下图:
image-20210810205114401

加载结果

第一次加载上来的结果如下:
image-20210810205633049

重新刷新一次后,得到的结果如下:
image-20210810205957902

可以看到,第二次的结果和我们之前对强缓存和协商缓存的分析是一致的。

不知道大家有没有这样一个疑问:那要是我确实想要重新从服务器获取资源,而不想使用缓存,该怎么实现呢?

强制获取服务端资源

借助浏览器

由于缓存资源要么存在浏览器缓存中,要么存在本地硬盘中,我们可以通过浏览器自带的功能来强制获取服务端资源,比如右键刷新图标,选择如下图所示的后两项都可:
image-20210810211034135

给 URL 添加标识

比如,给正常的 URL 后面加上随便一串数字,得到的结果如下:
image-20210810211530323

因为 URL 后面添加的字符串需要每次都改变,所以,我们一般选择添加时间戳。

总结

本文就是对前面几天的学习做一个验证,希望对你有所帮助!

~

~本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
xiezhr22 分钟前
用户只需要知道「怎么办」,不需要知道「为什么炸了」
java·api·接口设计规范
xiezhr25 分钟前
接口设计18条军规:写给那些半夜被“502”叫醒的人
java·api·restful
RainbowSea9 小时前
12. LangChain4j + 向量数据库操作详细说明
java·langchain·ai编程
RainbowSea10 小时前
11. LangChain4j + Tools(Function Calling)的使用详细说明
java·langchain·ai编程
考虑考虑13 小时前
Jpa使用union all
java·spring boot·后端
用户37215742613514 小时前
Java 实现 Excel 与 TXT 文本高效互转
java
浮游本尊15 小时前
Java学习第22天 - 云原生与容器化
java
聚客AI16 小时前
🙋‍♀️Transformer训练与推理全流程:从输入处理到输出生成
人工智能·算法·llm
渣哥17 小时前
原来 Java 里线程安全集合有这么多种
java
间彧17 小时前
Spring Boot集成Spring Security完整指南
java