当前位置: 首页 > news >正文

网页的CSS和JavaScript文件没有自动更新, 解决办法

项目场景:

无人值守的场馆预定以及管理


问题描述

更新了CSS和JavaScript,访问始终样式不对


原因分析:

浏览器缓存了你的CSS和JavaScript文件

浏览器缓存了你的CSS和JavaScript文件。当文件的修改时间戳(last-modified)没有改变时,浏览器会认为它们是最新的,从而不会重新加载,如果修改了css和js都可能不自动加载,导致代码没有生效。


解决方案:

1、手动强制刷新  

2、代码设置,自动刷新

  1. 清除浏览器缓存:刷新页面并尝试清除浏览器缓存。在大多数浏览器中,可以在开发者工具中找到清除缓存的选项。

  2. 强制刷新页面:可以使用快捷键 Ctrl + F5(在Windows上)或 Cmd + Shift + R(在Mac上)强制刷新页面,这样可以确保浏览器不使用缓存的文件。

  3. 修改文件名:如果缓存问题仍然存在,可以通过修改CSS和JavaScript文件的名称来强制浏览器获取新的文件。例如,可以在文件名后加上版本号或时间戳。

  4. 设置HTTP头信息:可以通过设置HTTP头信息来控制浏览器缓存。在你的Web服务器配置中,可以设置Cache-Control 和 Expires 头部,指示浏览器如何缓存文件。

  5. 添加版本号:在引用CSS和JavaScript文件的URL后面加上查询字符串,例如?v=20230328,其中的数字或hash可以是文件的版本号或文件内容的hash。每次更新文件时,只需更改这个查询字符串的值,一般由低往高修改。

最终解决方案是添加版本号

<link rel = "stylesheet" href = "style.css?version=1.01"/><script type='text/javascript' src='../XXX.js?v=1.01'></script>

相关文章:

网页的CSS和JavaScript文件没有自动更新, 解决办法

项目场景&#xff1a; 无人值守的场馆预定以及管理 问题描述 更新了CSS和JavaScript&#xff0c;访问始终样式不对 原因分析&#xff1a; 浏览器缓存了你的CSS和JavaScript文件 浏览器缓存了你的CSS和JavaScript文件。当文件的修改时间戳&#xff08;last-modified&#xff…...

Go语言 获取服务器资源磁盘Disk情况

1、获取整个磁盘的总量、已使用量、使用率 package mainimport ("fmt""github.com/shirou/gopsutil/disk""log" )func main() {// 获取所有挂载点的磁盘使用率信息partitions, err : disk.Partitions(false)if err ! nil {log.Fatalf("Err…...

使用上海云盾 CDN 和 CloudFlare 后 Nginx、 WordPress、 Typecho 获取访客真实 IP 方法

最近因为被 DDoS/CC 攻击的厉害,明月就临时的迁移了服务器,原来的服务器就空置下来了,让明月有时间对服务器进行了重置重新部署安装生产环境。因为站点同时使用了上海云盾和 CloudFlare(具体思路可以参考【国内网站使用国外 CloudFlare CDN 的思路分享】一文)两个 CDN 服务…...

深入探究RTOS的任务调度

阅读引言&#xff1a; 此文将会从一个工程文件&#xff0c; 一步一步的分析RTOS的任务调度实现&#xff0c; 这里选用FreeRTOS分析&#xff0c; 别的也差不多的&#xff0c; 可能在细节上有少许不一样。 目录 1&#xff0c; 常见嵌入式实时操作系统 2&#xff0c; 任务调度的…...

【shell脚本速成】函数

文章目录 一、函数1.1、函数介绍1.2、函数定义1.3、函数调用 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界&#xff0c;能与您在此邂逅&#xff0c;真是缘分使然&#xff01;&#x1f60a; &#x1f338;愿您在此停留的每一刻&#xf…...

拒绝零散碎片, 一文理清MySQL的各种锁

系列文章目录 学习MySQL先有全局观&#xff0c;细说其发展历程及特点 Mysql常用操作&#xff0c;谈谈排序与分页 拒绝零散碎片&#xff0c; 一文理清MySQL的各种锁&#xff08;收藏向&#xff09; 系列文章目录一、MySQL的锁指什么二、排他与共享三、全局锁&#xff08;Global…...

P5711 【深基3.例3】闰年判断

1. 题目链接 https://www.luogu.com.cn/problem/P5711 P5711 【深基3.例3】闰年判断 2. 题目描述 题目描述&#xff1a;判断一个数是否是闰年 输入&#xff1a;输入一个整数n 输出&#xff1a;输出1或0&#xff0c;如果是闰年&#xff0c;输出1&#xff0c;否则输出0 3. 我的…...

基于Raft算法实现的分布式键值对存储系统——学习笔记

目录 1 基于Raft算法实现的分布式键值对存储系统 1.1 模块 2 Raft 算法 2 .1 概念 2.2 raft角色&#xff08;先简单了解&#xff0c;方便后续阅读&#xff09; 2.3 raft想解决什么问题&#xff1f; 2.4 选举领导 2.5 领导者故障 附录&#xff1a; 参考文献&#xff1…...

秋招突击——6/17——复习{整理昨天的面试资料}——新作{删除链表倒数第n个节点}

文章目录 引言复习新作删除链表倒数第N个节点题目描述个人实现参考实现 总结 引言 主管面&#xff0c;面的很凄惨&#xff0c;不过无所谓了&#xff0c;我已经尽力了。上午都在整理的面经&#xff0c;没有复习算法&#xff0c;而且这两天要弄一下论文&#xff0c;二十号就要提…...

宝塔面板使用技巧(pure-FTP)上传文件和文件夹默认权限644的修改

前言 科技在进步各种各样的开源软件和库让我们应接不暇&#xff0c;我估计现在所有做php开发的人员都知道宝塔面板&#xff0c;我就经常用&#xff0c;但是不知道大家出现过一个问题不就是在我们开发过程中需要实时的给服务器上传我们开发的文件那么就涉及到了宝塔自带的pure-F…...

mac m芯片安装win11遇坑

mac m芯片安装win11遇坑 1、下载arm架构镜像 磁力链接&#xff1a; magnet:?xturn:btih:e8c15208116083660709eac9aee124e025c01447&dnSW_DVD9_Win_Pro_11_22H2_64ARM_ChnSimp_Pro_Ent_EDU_N_MLF_X23-12755.ISO&xl57198960642、使用VMWare Fusion安装&#xff0c;启…...

一个自定义流程的平台

脚本语言使用的是C#&#xff0c;当用户发布一个新的流程时&#xff0c;会把C#的脚本编译成dll&#xff0c;然后添加到微服务中&#xff0c;因为有了硬编译&#xff0c;所以执行速度是非常快的。逻辑脚本支持调试&#xff0c;可以断点和逐行调试。平台提供了调试工具&#xff0c…...

舔狗日记Puls微信小程序源码

源码介绍&#xff1a; 这是一款舔狗日记Puls微信小程序源码&#xff0c;提供每日一舔的功能&#xff0c;让你舔到最后&#xff0c;什么都有&#xff01; 源码通过API获取一些舔狗日记&#xff0c;内置了100多句舔狗日记&#xff0c;让你摆脱上班摸鱼的无聊时光&#xff0c; …...

PyMuPDF 操作手册 - 05 PDF的OCR识别等

文章目录 六、PyMuPDF的OCR识别6.1 使用 Tesseract进行OCR6.2 使用MuPDF进行OCR6.3 使用 Python 包easyocr进行OCR识别6.4 使用 Python ocrmypdf包进行OCR识别6.5 将图像批量OCR并转换为PDF七、PDF附加、嵌入、批注等7.1 附加文件7.2 嵌入文件7.3 从文档中获取所有批注六、PyMu…...

Vue与TypeScript的配合:如何在Vue项目中使用TypeScript,利用静态类型提高代码的可维护性

环境搭建: 在你的 Vue 项目中使用 TypeScript,使你的代码具有静态类型检查、IDE 的类型提示等有益的功能。以下是搭建 Vue 和 TypeScript 的开发环境的步骤: 创建一个项目 使用 Vue CLI 创建一个新的Vue项目是最简单的方法: vue create my-project 在出现的提示中,选择…...

华为仓颉语言介绍

文章目录 1.简介2.初识仓颉语言3.基本概念3.1标识符3.2程序结构3.3变量3.4表达式3.4.1if 表达式3.4.2while语句3.4.3do-while表达式3.4.4 for-in 表达式3.4.5 where条件3.4.6 break和continue 3.5 函数 1.简介 随着万物互联以及智能时代的到来&#xff0c;软件的形态将发生巨大…...

《昇思 25 天学习打卡营第 3 天 | 张量 Tensor 》

《昇思 25 天学习打卡营第 3 天 | 张量 Tensor 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 感觉像是在 学习高数一样 张量 Tensor 张量是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。 张量&#xf…...

free命令——显示系统内存使用情况

free命令的功能是显示系统内存使用情况&#xff0c;包含物理内存和交换内存的总量、使用量和空闲量。 语法格式&#xff1a;free [选项] 常用选项及含义 选项含义-b以字节B为单位显示内存和交换内存的容量使用情况-k以KB为单位显示内存和交换内存的容量使用情况-m以MB为单位…...

麒麟移动运行环境(KMRE)——国内首个开源的商用移固融合“Android生态兼容环境”正式开源

近日&#xff0c;由麒麟软件研发的KMRE&#xff08;Kylin Mobile Runtime Environment&#xff0c;麒麟移动运行环境&#xff09;在openKylin&#xff08;开放麒麟&#xff09;社区正式发布&#xff0c;为Linux桌面操作系统产品提供了高效的Android运行环境解决方案。这也是国内…...

print(“{}{}“.format())

print("{}{}".format()) 是 Python 中用于格式化字符串并将其输出到控制台的一种方法。format 方法允许你在字符串中插入变量或表达式的值&#xff0c;并以指定的格式显示它们。 基本语法 print("format_string".format(value1, value2, ...))format_str…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...