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

前端项目上线后,浏览器缓存未刷新问题

文章目录

  • 问题背景
  • 一、解决办法
  • 二、实现原理
    • 关于缓存
    • 强缓存
    • 协商缓存
    • 刷新页面对浏览器的影响
  • 总结


问题背景

  前端页面开发测试完,要进行上线,某些页面上传更新到服务器之后,浏览器并没有更新,渲染的还是老页面。这是因为浏览器读了缓存导致的,需要清空缓存刷新也能看到页面的更新。但是一些用户不知道这些操作。
  所以,需要解决文件变动后浏览器没有更新的问题。

一、解决办法

  1、入口文件不缓存或协商缓存;其他静态资源文件缓存,然后请求每个文件的url拼接一个hash值或打包时文件名加上hash值,这个hash值可以根据文件来计算。(比对url地址,url地址不一样则不走缓存)
  2、提示用户清除缓存。

二、实现原理

关于缓存

  什么是缓存? 用户第一次访问文件、数据、样式等资源都要从服务端请求,浏览器什么都没有。第二次访问则不需要反复请求,可以从缓存拿。

  为什么需要缓存? 输入网址到加载页面的过程,cpu计算、页面渲染都是比较快的,但是整个过程中比较慢的是网络请求,达到几百毫秒或一秒。所以,尽量减少网络请求数量和体积,才能更快。
  使用缓存,可以优化性能,不需要每次都请求服务器,节省流量、减少服务器压力、提高加载速度
  缺点:缓存内容跟服务器数据不一致;消耗内存。

  哪些资源可以被缓存? 静态资源(js css img)(webpack可以配置hash,文件更改后就可以更新,不使用缓存)

浏览器缓存一般是针对静态资源(js/css/img等),需不需要做缓存是可以根据服务器返回的字段进行控制的。
在这里插入图片描述

与缓存相关的headers:

  • Cache-Control:请求头/响应头。服务端认为可以缓存,就给请求头加上Catche-Control。控制缓存策略
  • Expires:响应头,代表资源过期时间
  • Last-Modified:响应头,资源最近修改时间
  • If-Modified-Since:请求头,资源最近修改时间。(和Last-Modified成对。即从响应头里面拿,再告诉服务器)
  • Ttag:响应头,资源标识
  • If-None-Match:请求头,缓存资源标识。(和Etag成对,由浏览器告诉服务器)

强缓存

  服务器返回缓存,服务器去决定要不要缓存。比如,Catche-Control设置max-age=180000,则过了这段时间,缓存过期了才会请求服务器。或者,资源名称变了,就会在缓存过期前更新。

Cache-Control的值:

  • max-age:缓存将在xxx秒后过期;
  • no-cache:不想做缓存,让服务端处理;
  • no-store:不用本地缓存,也不用服务端做缓存
  • private:允许用户做缓存,代理服务器不能做;
  • public:客户端和代理服务器均可缓存

协商缓存

客户端初次请求,服务端返回资源,和资源标识。
再次请求,带着资源标识;服务器根据资源标识判断资源是否有变化。
无变化,返回304;有变化,返回200和新资源。

资源标识有(在Response Headers):

  • Last-Modified 资源的最后修改时间。请求的时候带上If-Modified-Since,服务器就可以判断修改时间是否一样,不一样则说明修改过啦。
  • Etag 资源的唯一标识。可以根据文件计算它的值,请求时带上If-None-Match,服务器比较这个值,就可以判断是否修改。

Etag解决了 Last-Modified无法修改的问题:
1、一些文件也许会周期性更改,但是内容不变。而此时不希望客户端认为文件修改了。
2、文件修改非常频繁,秒以下时间内修改,If-Modified-Since能检查到的粒度是秒级的。那这种修改无法判断。
3、某些服务器不能精确的得到文件的最后修改时间。

刷新页面对浏览器的影响

正常操作: 输入url、链接跳转、前进后退。强制缓存和协商缓存都是有效的。
手动刷新:F5,点击刷新按钮,右击菜单刷新。强制缓存失效,协商缓存有用。
强制刷新: ctrl + F5。强制缓存失效,协商缓存失效

总结

  http的缓存机制是一种优化策略。但也会出现文件变动后浏览器没有更新的问题。综上,入口文件不缓存或采用协商缓存,其他静态资源使用强缓存,url拼接hash值或者打包时给文件名加上hash值。

相关文章:

前端项目上线后,浏览器缓存未刷新问题

文章目录问题背景一、解决办法二、实现原理关于缓存强缓存协商缓存刷新页面对浏览器的影响总结问题背景 前端页面开发测试完,要进行上线,某些页面上传更新到服务器之后,浏览器并没有更新,渲染的还是老页面。这是因为浏览器读了缓存…...

Vulnhub系列:Raven 1

该篇为Vulnhub系列靶机渗透,本次靶机存在4个flag。下面开始我们今天的渗透之旅。Raven靶机有很多种思路,我将对其进行一一整理。首先进行信息收集,利用arp-scan和nmap,进行靶机的ip及端口扫描发现了22、80、111端口。下面访问80端…...

MybatisPlus------多数据源环境(十一)

MybatisPlus------多数据源环境&#xff08;十一&#xff09; 生产环境中常常会存在多个数据源。 比如读写分离、一主多从、混合模式等等。 首先再pom文件中需要引入依赖&#xff1a; 多数据源所需要使用到的依赖 <!-- 多数据源所需要使用到的依赖--><depend…...

Tomcat+IDEA+Servlet能显示页面但提交form表单出现404问题

问题&#xff1a; 当我们使用tomcat启动&#xff0c;然后输入对应的url路径时候&#xff0c;能出现该html的页面&#xff0c;但提交表单后&#xff0c;却出现了404的问题&#xff0c;这时候我就很疑惑了....然后开始慢慢分析。 思路&#xff1a; 首先我们得知道404状态码是什…...

【蓝桥杯集训16】多源汇求最短路——Floyd算法(2 / 2)

目录 Floyd求最短路模板 4074. 铁路与公路 - floyd 脑筋急转弯 Floyd求最短路模板 活动 - AcWing 题目&#xff1a; 给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 再给定 k 个询问&#xff0c;每个询问包含两个整数 x 和…...

simulink stateflow 状态机

系列文章目录 文章目录系列文章目录前言一、基操二、stateflow 数据三、chart动作四、chart的执行五、flow chart / junction六、状态机中的函数 Stateflow Functions七、chart层次结构八、案例——吸尘器机器人的驱动模式前言 一、基操 在tooltrip中选择DEBUG&#xff0c;通过…...

水库大坝安全监测的主要坝体类型介绍

水电站和水库大坝安全的分类中有重力坝、土石坝等不同的大坝形式。就在这里详细水库大坝安全监测按照建造形式&#xff0c;基本上可以分为三类&#xff1a;重力坝、土石坝和拱坝。 &#xff08;1&#xff09;重力坝 重力坝&#xff0c;顾名思义就是利用自身重力来维持坝体稳定…...

物理层概述(二)重点

目录前言编码与调制&#xff08;1&#xff09;基带信号与宽带信号编码与调制编码与调制&#xff08;2&#xff09;数字数据编码为数字信号非归零编码【NRZ】曼斯特编码差分曼彻斯特编码数字数据调制为模拟信号模拟数据如何编码为数字信号模拟数据调制为模拟信号物理层传输介质导…...

成都待慕电商:抖音极速版商品卡免佣扶持政策规则

新规&#xff0c;抖音极速版推出商品卡免佣扶持政策规则&#xff0c;本次抖音规则如何规定&#xff1f;具体往下看&#xff1a;一、政策简介1.1政策介绍为了更好地满足用户消费需求&#xff0c;丰富商家经营模式&#xff0c;降低商家经营成本&#xff0c;现平台针对商品卡场景推…...

青岛双软认定标准

软件企业的认定是有一定的标准的&#xff0c;需要满足以下这些条件&#xff1a;1、在我国境内依法设立了企业法人的企业&#xff1b;2、以计算机软件开发生产、系统集成、应用服务和其他相应技术服务为经营业务和主要经营收入&#xff1b;3、具有一种以上由本企业开发或由本企业…...

【00后卷王秘籍】python自动化测试—Python自动化框架及工具

1 、概述 手续的关于测试的方法论&#xff0c;都是建立在之前的文章里面提到的观点&#xff1a; 功能测试不建议做自动化 接口测试性价比最高 接口测试可以做自动化 后面所谈到的 测试自动化 也将围绕着 接口自动化 来介绍。 本系列选择的测试语言是 python 脚本语言。由于其…...

MySQL数据库基本操作

DDL 1、DDL解释 DDL(Data Definition Language)&#xff0c;数据定义语言&#xff0c;该语言部分包括以下内容&#xff1a; 对数据库的常用操作 对表结构的常用操作 修改表结构1、对数据库的常用操作 2、对表结构的常用操作-创建表 创建表格式 3、对表结构的常用操作-创建表…...

2023年最新的站内SEO指南:如何通过关键词优化提高网站排名

SEO或搜索引擎优化是指通过改善网站的内部和外部元素&#xff0c;以获得更好的自然搜索引擎排名和更多的网站流量。 链接建设和外链是SEO的重要组成部分&#xff0c;因为它们可以提高网站的权威性和可信度&#xff0c;从而使其在搜索引擎中排名更高。 在此指南中&#xff0c;…...

【Java】Java环开发环境安装

Java环开发环境安装 简介&#xff1a; 如果要从事Java编程&#xff0c;则需要安装JDK&#xff0c;如果仅仅是运行一款Java程序则JRE就满足要求。 Java的安装包分为两类 一类是JRE其就是一个独立的Java运行环境&#xff1b; 一类是JDK其是Java的开发环境&#xff0c;不过在JDK…...

[蓝桥杯] 枚举、模拟和排列问题

文章目录 一、连号区间数 1、1 题目描述 1、2 题解关键思路与解答 二、递增三元组 2、1 题目描述 2、2 题解关键思路与解答 三、错误票据 3、1 题目描述 3、2 题解关键思路与解答 四、回文日期 4、1 题目描述 4、2 题解关键思路与解答 五、归并排序 标题&#xff1a;蓝桥杯——…...

C++基础了解-02-C++ 数据类型

C 数据类型 一、C 数据类型 使用编程语言进行编程时&#xff0c;需要用到各种变量来存储各种信息。变量保留的是它所存储的值的内存位置。这意味着&#xff0c;当创建一个变量时&#xff0c;就会在内存中保留一些空间。 可能需要存储各种数据类型&#xff08;比如字符型、宽…...

关于MSVCR100.dll、MSVCR100d.dll、Msvcp100.dll、abort()R6010等故障模块排查及解决方法

一、常见故障介绍  最近在开发相机项目&#xff08;项目细节由于公司保密就不介绍了&#xff09;&#xff0c;程序运行5个来月以来首次出现msvcr100.dll故障等问题&#xff0c;于是乎开始了分析之路&#xff0c;按照度娘上的一顿操作&#xff0c;期间也是出现了各种不一样的问…...

【蓝桥杯集训·每日一题】AcWing 3305. 作物杂交

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴Spfa算法一、题目 1、原题链接 3305. 作物杂交 2、题目描述 作物杂交是作物栽培中重要的一步。 已知有 N 种作物 (编号 1 至 N)&#xff0c;第 i 种作物从播种到成熟的时间…...

深入浅出PaddlePaddle函数——paddle.to_tensor

分类目录&#xff1a;《深入浅出PaddlePaddle函数》总目录 相关文章&#xff1a; 深入浅出PaddlePaddle函数——paddle.Tensor 深入浅出PaddlePaddle函数——paddle.to_tensor 通过已知的data来创建一个Tensor&#xff0c;Tensor类型为paddle.Tensor。data可以是scalar、tupl…...

JavaScript高级程序设计读书分享之10章——函数

JavaScript高级程序设计(第4版)读书分享笔记记录 适用于刚入门前端的同志 定义函数 定义函数有两种方式&#xff1a;函数声明和函数表达式大致看这两种方式没有什么区别&#xff0c;事实上&#xff0c;JavaScript 引擎在加载数据时对它们是区别对待的。JavaScript 引擎在任何代…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...