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