三、浏览器缓存动如何使用（Expires、 cache-control、Etag、last-modified）----哪些文件需要强缓存，哪些文件需要协商缓存

news2024/11/28 19:30:59

参考链接1：彻底弄懂强缓存与协商缓存

参考链接2：浏览器缓存

参考链接3：扼杀 304，Cache-Control: immutable

如何搭建 express，或者node服务

### 如何搭建 express，
  npm install express --save

### express 如何实现热更新
  npm install node-dev -D
  
  // package.json 里的script中，配置
  "dev": "node-dev ./bin/www"

  // 启动项目
  npm run dev

### 如何在express中新增get / post 请求
  在 routes 中的 index.js 下可查看

  注意：get请求是打开 localhost:3000/ 通过浏览器可以直接访问数据

      post 需要通过postman 或者 axios 请求来测试接口是否正常，不能使用 localhost:3000/login 测试接口，默认是get的请求方法，会报 404 页面不存在。

一、使用express模拟强缓存

const express = require('express');
const fs = require('fs');
const app = express();
const port = 3000;
const path = require('path');
var CacheControl = require("express-cache-control")
var cache = new CacheControl().middleware
// express-cache-control
// https://www.npmjs.com/package/express-cache-control

app.get('/',(req,res) => {
  // console.log('fs111', fs.readFileSync('./index.html'))
  const data = fs.readFileSync('./src/index.html')
  res.end(data)

})


// express 怎么引入css文件?报错，fs.readFile不是一个函数，如何解决？？
// app.use(express.static(path.join(__dirname, '/public')));
app.get('/style.css', cache('seconds', 10), (req,res) => { 
  // res.setHeader('Expires',new Date(new Date().getTime()+1000 * 10).toGMTString())
  // res.setHeader('Cache-Control', 'max-age=10')
  // res.setHeader('Content-type', 'text/css');
  const data = fs.readFileSync('./public/style.css')
  // console.log('fs222', data)
  // setTimeout(() => {
    // fs.readFilesync放在函数中提示fs.readFilesync 不是一个函数
    // const data = fs.readFilesync('./public/style.css');
    res.end(data);
  // },3000)
})


app.get('/settingPage.js', (req,res) => { 
  res.setHeader('Expires',new Date(new Date().getTime()+1000 * 10).toGMTString())
  res.setHeader('Cache-Control', 'max-age=10')
  const data = fs.readFileSync('./src/settingPage.js')
  // setTimeout(() => {
    res.end(data);
  // },3000)
})

app.listen(port,() => {
  console.log(`Example app listening at http://localhost:${port})`)
})

二、使用node模拟强缓存

let http = require('http');

let server = http.createServer(function(request, response){
  console.count('request')
    let url = request.url,
        content = null;

    console.log('收到http协议请求，请求地址是：' + url);

    if(url == '/' || url == '/index.html'){
        content = '<link rel="stylesheet" href="/register.css">page content';
        // 为什么会调用 /register.css，因为href='/register.css'会请求css，所以会再次执行
        response.setHeader('Content-type', 'text/html');
    }
    else if(url == '/register.css'){
        content = 'body{color:red;}';
        response.setHeader('Cache-Control', 'max-age=10');
        response.setHeader('Content-type', 'text/css');
    }

    if(content === null){
        console.log(url + ' 该地址无效');
        response.writeHead(404, {
            'Content-type' : 'text/html'
        });
        response.end('404啊亲！');
    }else{
        response.end(content);
    }
});

server.listen(8282, 'localhost');
console.log('server start at http://localhost:8282');

三、Express中使用协商缓存 ETag，ETag：每个文件有一个，改动文件了就变了，可以看似md5

参考地址：https://juejin.cn/post/6844903763665240072

/*
浏览器缓存
https://juejin.cn/post/6844903763665240072

扼杀 304，Cache-Control: immutable
https://www.cnblogs.com/ziyunfei/p/5642796.html
*/

const express = require('express');
const fs = require('fs');
const app = express();
const port = 3000;
const path = require('path');
var CacheControl = require("express-cache-control")
var cache = new CacheControl().middleware
// express-cache-control
// https://www.npmjs.com/package/express-cache-control
const etag = require('etag')

app.get('/',(req,res) => {
  const data = fs.readFileSync('./src/index.html')
  const etagContent = etag(data); //根据文件生成唯一标识
  res.setHeader('Etag', etagContent) // 其实是一个MD5

  // 读取第一次返回给客户端的文件指纹
  // console.log('req-->', req.headers)
  const ifNoneMatch = req.headers['if-none-match'];
  console.log('res-->', res.statusCode)
  if (ifNoneMatch && ifNoneMatch === etagContent) {
    console.log('是相同的hash值吗')
    return (res.statusCode = 304) && res.end();
  }
  // console.log('fs111', fs.readFileSync('./index.html'))
  res.end(data)
})


// express 怎么引入css文件?报错，fs.readFile不是一个函数，如何解决？？
// app.use(express.static(path.join(__dirname, '/public')));
app.get('/style.css', cache('seconds', 10), (req,res) => { 
  // res.setHeader('Expires',new Date(new Date().getTime()+1000 * 10).toGMTString())
  // res.setHeader('Cache-Control', 'max-age=10')
  // res.setHeader('Content-type', 'text/css');
  const data = fs.readFileSync('./public/style.css')
  // console.log('fs222', data)
  // setTimeout(() => {
    // fs.readFilesync放在延时器函数中提示fs.readFilesync 不是一个函数，把它提取到settimeout外面就好了
    // const data = fs.readFilesync('./public/style.css');
    res.end(data);
  // },3000)
})

app.get('/settingPage.js', (req,res) => { 
  res.setHeader('Expires',new Date(new Date().getTime()+1000 * 10).toGMTString())
  // res.setHeader('Cache-Control', 'max-age=10')
  const data = fs.readFileSync('./src/settingPage.js')
  // setTimeout(() => {
    res.end(data);
  // },3000)
})

app.listen(port,() => {
  console.log(`Example app listening at http://localhost:${port})`)
})
第一次请求状态码为200，res中设置 etag

在这里插入图片描述

刷新再次请求，req中获取 if-none-match 跟 etag相同，设置 statusCode = 304，

在这里插入图片描述

在这里插入图片描述

四、Express中使用协商缓存 last-modified，文件最后修改的时间，服务器收到请求后发现有if-modified-since则与被请求资源的最后修改时间进行对比（Last-Modified）,若最后修改时间较新（大），说明资源又被改过，则返回最新资源，HTTP 200 OK;若最后修改时间较旧（小），说明资源无新修改，响应HTTP 304 走缓存。

在这里插入图片描述

第一次请求状态码为200，res中设置 last-modified

在这里插入图片描述

刷新再次请求，req中获取 if-modified-since 跟 last-modified相同，设置 statusCode = 304，

在这里插入图片描述

/*
浏览器缓存
https://juejin.cn/post/6844903763665240072

扼杀 304，Cache-Control: immutable
https://www.cnblogs.com/ziyunfei/p/5642796.html
*/

const express = require('express');
const fs = require('fs');
const app = express();
const port = 3000;
const path = require('path');
var CacheControl = require("express-cache-control")

// 缓存包
var cache = new CacheControl().middleware
// express-cache-control
// https://www.npmjs.com/package/express-cache-control


// 协商缓存 Etag，先将文件转换成buff类型，然后通过etag将文件内容生成唯一的 hash 值，最后通过获取 if-none-match 获取etag的值，进行对比
const etag = require('etag')
// etag 参考地址：https://blog.csdn.net/weixin_42989576/article/details/123695991

// 协商缓存 last-modified, 通过 stat 查看文件最后修改的时间，如果 last-modified !== if-modified-since ，那么修改statusCode = 304
const {stat,readFile } = require('fs/promises');

app.get('/',async (req,res) => {
  const data = fs.readFileSync('./src/index.html')
  const statobj = await stat('./src/index.html');
  console.log('3838383',statobj)
  const ctime = statobj.ctime.toGMTString();
  res.setHeader('Last-Modified',ctime);
  const modifiedSince = req.headers['if-modified-since'];
  if (modifiedSince && modifiedSince === ctime) {
    console.log('文件最后修改的时间相等')
    // 服务器收到请求后发现有if-modified-since则与被请求资源的最后修改时间进行对比（Last-Modified）,若最后修改时间较新（大），说明资源又被改过，则返回最新资源，HTTP 200 OK;若最后修改时间较旧（小），说明资源无新修改，响应HTTP 304 走缓存。
    // 链接：https://juejin.cn/post/6844903838768431118
    return (res.statusCode = 304) && res.end();
  }
  res.end(data)
})




// express 怎么引入css文件?报错，fs.readFile不是一个函数，如何解决？？
// app.use(express.static(path.join(__dirname, '/public')));
app.get('/style.css', cache('seconds', 10), (req,res) => { 
  // res.setHeader('Expires',new Date(new Date().getTime()+1000 * 10).toGMTString())
  // res.setHeader('Cache-Control', 'max-age=10')
  // res.setHeader('Content-type', 'text/css');
  const data = fs.readFileSync('./public/style.css')
  // console.log('fs222', data)
  // setTimeout(() => {
    // fs.readFilesync放在函数中提示fs.readFilesync 不是一个函数
    // const data = fs.readFilesync('./public/style.css');
    res.end(data);
  // },3000)
})


app.get('/settingPage.js', (req,res) => { 
  res.setHeader('Expires',new Date(new Date().getTime()+1000 * 10).toGMTString())
  // res.setHeader('Cache-Control', 'max-age=10')
  const data = fs.readFileSync('./src/settingPage.js')
  // setTimeout(() => {
    res.end(data);
  // },3000)
})

app.listen(port,() => {
  console.log(`Example app listening at http://localhost:${port})`)
})
last-modified 存在以下缺点：你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag呢？HTTP1.1中Etag的出现（也就是说，ETag是新增的，为了解决之前只有If-Modified的缺点）主要是为了解决几个Last-Modified比较难解决的问题：
  1. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
  2. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
  3. 某些服务器不能精确的得到文件的最后修改时间。

遇到的问题1，express / node 为什么Cache-Control不生效呢，原因：浏览器侧边栏(可能是勾选了Deactivate cache（停用缓存）会导致缓存不生效，每次发送http请求)

在这里插入图片描述

在这里插入图片描述

遇到的问题2， fs.readFilesync放在延时器函数中提示fs.readFilesync 不是一个函数，把它提取到settimeout外面就好了

在这里插入图片描述

遇到的问题3，如何设置etag的值，需要npm install etag，然后用文件生成一个hash值，最后比对，如果相同修改 code值，

在这里插入图片描述

遇到的问题4、如何设置 last-modified 的值

在这里插入图片描述

用户行为对缓存的影响？？？

在这里插入图片描述

  • 即：F5 会 跳过强缓存规则，直接走协商缓存；；；Ctrl+F5 ，跳过所有缓存规则，和第一次请求一样，重新获取资源

项目缓存策略

  • 比如 vue 项目，脚手架已经将更改的文件做 hash 处理了，因此一般的 js、css 文件不需要我们再去操作。
  • 而对于 index.html，我们需要在 nginx 上做 no-store 处理，即完全不缓存 index.html，每次都请求最新的html。。。因为 html 中会外链 css、js，如果我 html 还是走的缓存，那链接的还是老的 css 啊，想想？？？
    在这里插入图片描述

哪些文件需要强缓存???

哪些文件需要协商缓存???

请问强制缓存、协商缓存 存储在内存缓存还是硬盘缓存？可以指点一下吗

首先，缓存数据是一定会存储在硬盘。其次，部分资源在浏览器加载后会储存在内存，一般是比较小一点的非异步加载文件。资源加载时，会优先取内存缓存，内存缓存不存在才会继续取硬盘缓存，内存缓存在网页关闭后会清空。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1069806.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[C++基础]-多态

[C++基础]-多态

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正。 本期学习目标&am…
阅读更多...
智能AI系统源码ChatGPT系统源码+详细搭建部署教程+AI绘画系统+已支持OpenAI GPT全模型+国内AI全模型

智能AI系统源码ChatGPT系统源码+详细搭建部署教程+AI绘画系统+已支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Chat…
阅读更多...
NFT Insider#110：The Sandbox与TB Media Global合作，YGG Web3游戏峰会阵容揭晓

NFT Insider#110：The Sandbox与TB Media Global合作，YGG Web3游戏峰会阵容揭晓

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members、BeepCrypto出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据&#xff0c;艺术新闻类&#xff0c;游戏新闻类&#xff0c;虚拟世界类&#xff0…
阅读更多...
双字单字拆分/合并操作(博途SCL源代码)

双字单字拆分/合并操作(博途SCL源代码)

博途PLC的位、字节拆分和合并操作还可以参考下面的文章链接： 博途PLC 位/字/字节 Bit/ Word/Byte拆分与合并_博途的bit-CSDN博客有时候我们需要将分散分布的开关量信号组合为一个整体比如一个字节再完成发送，或者一些报警联锁控制，组合为一个字方便触摸屏报警记录等，下面我…
阅读更多...
day11_oop_面向对象基础

day11_oop_面向对象基础

零、今日内容 一、作业 二、面向对象 一、作业 题目26 设计方法,在一个数组中&#xff0c;返回所有的 指定数据的下标 例如, 这个数组[1,2,8,4,5,7,8,7,8,9],找到其中元素8的下标[2,6,8]public static void main(String[] args) {int[] arr {1,2,8,4,5,7,8,7,8,9};int[] ind…
阅读更多...
云计算安全的新挑战：零信任架构的应用

云计算安全的新挑战：零信任架构的应用

文章目录 云计算的安全挑战什么是零信任架构&#xff1f;零信任架构的应用1. 多因素身份验证&#xff08;MFA&#xff09;2. 访问控制和策略3. 安全信息和事件管理&#xff08;SIEM&#xff09;4. 安全的应用程序开发 零信任架构的未来 &#x1f389;欢迎来到云计算技术应用专栏…
阅读更多...
vue-3

vue-3

一、文章内容概括 1.生命周期 生命周期介绍生命周期的四个阶段生命周期钩子声明周期案例 2.工程化开发入门 工程化开发和脚手架项目运行流程组件化组件注册 二、Vue生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09…
阅读更多...
二叉搜索树的初步认识

二叉搜索树的初步认识

二叉搜索树与常见的查找算法有什么区别&#xff1f; 首先&#xff0c;如果有同学不知道有哪些查找算法可以查看&#xff1a;常见查找算法_加瓦不加班的博客-CSDN博客 如果还有一些不了解的&#xff0c;请查看加瓦不加班_数据结构,链表,递归-CSDN博客 接下来&#xff0c;我们来…
阅读更多...
玄子Share- IDEA 2023 SpringBoot 热部署

玄子Share- IDEA 2023 SpringBoot 热部署

玄子Share- IDEA 2023 SpringBoot 热部署 修改 IDEA 部署设置 IDEA 勾选如下选项 新建 SpringBoot 项目 项目构建慢的将 Spring Initializr 服务器 URL 改为阿里云&#xff1a;https://start.aliyun.com/ 在这里直接勾选Spring Boot Devtools插件即可 测试 切出 IDEA 项目文…
阅读更多...
「专题速递」AR协作、智能NPC、数字人的应用与未来

「专题速递」AR协作、智能NPC、数字人的应用与未来

元宇宙是一个融合了虚拟现实、增强现实、人工智能和云计算等技术的综合概念。它旨在创造一个高度沉浸式的虚拟环境&#xff0c;允许用户在其中交互、创造和共享内容。在元宇宙中&#xff0c;人们可以建立虚拟身份、参与虚拟社交&#xff0c;并享受无限的虚拟体验。 作为互联网大…
阅读更多...
2023年H1汽车社媒营销趋势报告

2023年H1汽车社媒营销趋势报告

2023上半年车市“内卷”&#xff0c;汽车营销玩法越来越多样&#xff0c;品牌的矩阵式营销也成为头部车企重点营销战略。 据乘联会预测&#xff0c;2023下半年车市将受到二季度价格战的透支&#xff0c;需要一定修复期。在整体形势较不利的情况下&#xff0c;车企如何破局实现销…
阅读更多...
通过IP地址如何计算相关地址

通过IP地址如何计算相关地址

以IP地址为1921681005 子网掩码是2552552550为例。算出网络地址、广播地址、地址范围、主机数。 分步骤计算 1&#xff09; 将IP地址和子网掩码换算为二进制&#xff0c;子网掩码连续全1的是网络地址&#xff0c;后面的是主机地址。 虚线前为网络地址&#xff0c;虚线后为主机…
阅读更多...
基于Java的个性化旅游攻略系统设计与实现(源码+lw+ppt+部署文档+视频讲解等)

基于Java的个性化旅游攻略系统设计与实现(源码+lw+ppt+部署文档+视频讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…
阅读更多...
yolov7的bug，无法指定显卡（程序默认0号卡）

yolov7的bug，无法指定显卡（程序默认0号卡）

**问题&#xff1a;**命令行参数指定的是4号卡&#xff0c;但实际却总是在0号卡建立进程 真抽象啊&#xff0c;这一步&#xff0c;模型被送到0号卡&#xff0c;但实际上&#xff0c;送到了4号卡&#xff08;进程是在4号卡上建立的&#xff09; 解决办法&#xff1a; 在train.py…
阅读更多...
【LeetCode热题100】--230.二叉搜索树中第K小的元素

【LeetCode热题100】--230.二叉搜索树中第K小的元素

230.二叉搜索树中第K小的元素 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 个最小元素&#xff08;从 1 开始计数&#xff09;。 二叉搜索树的中序遍历是有序的&#xff0c;所有先得到其有序序列&#xff0c;然后在取…
阅读更多...
端口没有占用，Springboot却提示端口占用了

端口没有占用，Springboot却提示端口占用了

1.问题描述 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 19004 was already in use.Action:Identify and stop the process thats listening on port 19004 or configure this applica…
阅读更多...
【设计模式】使用原型模式完成业务中“各种O”的转换

【设计模式】使用原型模式完成业务中“各种O”的转换

文章目录 1.原型模式概述2.浅拷贝与深拷贝2.1.浅拷贝的实现方式2.2.深拷贝的实现方式 3.结语 1.原型模式概述 原型模式是一种非常简单易懂的模型&#xff0c;在书上的定义是这样的&#xff1a; Specify the kinds of objects to create using a prototypical instance,and cre…
阅读更多...
RobotFramework 自动化测试实战基础篇

RobotFramework 自动化测试实战基础篇

RobotFramework 简介和特点 RobotFramework 不是一个测试工具&#xff0c;准确来说&#xff0c;它是一个自动化测试框架&#xff0c;或者说它是一个自动化测试平台。他拥有的特性如下&#xff1a; 支持关键字驱动、数据驱动和行为驱动测试执行报告和日志是HTML格式&#xff0…
阅读更多...
并发编程基础知识

并发编程基础知识

一、线程的基础概念 一、基础概念 1.1 进程与线程A 什么是进程&#xff1f; 进程是指运行中的程序。 比如我们使用钉钉&#xff0c;浏览器&#xff0c;需要启动这个程序&#xff0c;操作系统会给这个程序分配一定的资源&#xff08;占用内存资源&#xff09;。 什么线程&a…
阅读更多...
android 修改输出apk的包名

android 修改输出apk的包名

一&#xff0c;打包方式使用IDE菜单选项 二、在app级别的build.gradle下配置&#xff1a; static def releaseTime() {return new Date().format("yyyyMMdd.kkmm", TimeZone.getTimeZone("GMT8")) }android.applicationVariants.all { variant ->print…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023