关于前端:前端-面试-HTTP-总结十-HTTP-缓存应用

4次阅读

共计 1062 个字符,预计需要花费 3 分钟才能阅读完成。

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

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

前言

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

总结

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

~

~ 本文完,感激浏览!

~

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

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

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

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

正文完
 0