最近我在做前端面试题总结系列,感兴趣的敌人能够增加关注,欢送斧正、交换。

争取每个知识点可能多总结一些,至多要做到在面试时,针对每个知识点都能够侃起来,不至于哑火。

前言

通过后面几篇内容的学习,咱们晓得 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 前面增加的字符串须要每次都扭转,所以,咱们个别抉择增加工夫戳。

总结

本文就是对后面几天的学习做一个验证,心愿对你有所帮忙!

~

~本文完,感激浏览!

~

学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!

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

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

常识与技能并重,内力和外功兼修,实践和实际两手都要抓、两手都要硬!