最近我在做前端面试题总结系列,感兴趣的敌人能够增加关注,欢送斧正、交换。
争取每个知识点可能多总结一些,至多要做到在面试时,针对每个知识点都能够侃起来,不至于哑火。
前言
通过后面几篇内容的学习,咱们晓得 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 前面增加的字符串须要每次都扭转,所以,咱们个别抉择增加工夫戳。
总结
本文就是对后面几天的学习做一个验证,心愿对你有所帮忙!
~
~ 本文完,感激浏览!
~
学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!
你来,怀揣冀望,我有墨香相迎!你归,无论得失,唯以余韵相赠!
常识与技能并重,内力和外功兼修,实践和实际两手都要抓、两手都要硬!