首页 > 其他分享 >浏览器对于特定域名的缓存资源没有更新导致前端页面排版出错

浏览器对于特定域名的缓存资源没有更新导致前端页面排版出错

时间:2023-03-08 14:33:26浏览次数:41  
标签:缓存 浏览器 更新 css 刷新 排版 资源

如题,在使用网上下载来的前端模板,放入我的项目(已经部署过)中,启动服务器后访问,发现排版出现问题:

 

但资源已经更新在项目里了,css、font等等。

随后发现不部署到服务器的时候,在项目里本地打开页面是可以正常实现的:

 

合理怀疑是浏览器缓存了旧资源,就不去更新资源了。换了个浏览器,部署之后也可以正常访问。遂确定就是这个原因。

查了之后找到了刷新方法:

以下方法来强制刷新缓存并更新 CSS、JS 等资源:

  1. 使用快捷键强制刷新浏览器:通常情况下,在 Windows 上按下 "Ctrl + F5" 或者在 Mac 上按下 "Cmd + Shift + R" 可以强制刷新浏览器并更新缓存的资源。

  2. 清除浏览器缓存:你可以在浏览器设置中找到清除浏览器缓存的选项,具体步骤因浏览器而异。一般来说,你可以按下 "Ctrl + Shift + Delete"(在 Windows 上)或者 "Cmd + Shift + Delete"(在 Mac 上)打开清除浏览器缓存的选项,并选择清除缓存、历史记录等信息。

  3. 在资源 URL 上添加随机参数或时间戳:在 CSS、JS 等资源的 URL 上添加一个随机参数或时间戳,可以迫使浏览器重新请求这些资源,而不是使用缓存中的旧资源。例如,你可以将链接 example.com/styles.css 改为 example.com/styles.css?t=12345,其中 t=12345 是一个随机参数或时间戳。

然后就可以在原来的浏览器正常访问了:

 

 总结:以后在项目中更新前端资源后,已经访问过部署项目的浏览器要刷新资源才能显示。

标签:缓存,浏览器,更新,css,刷新,排版,资源
From: https://www.cnblogs.com/ban-boi-making-dinner/p/17191895.html

相关文章

  • MemoryCache 7.0.0.0 版本下获取所有缓存Key
    在使用.Net7.0的过程种,用到微软的MemoryCache,在封装通用接口的时候需要获取所有CacheKey。目前搜索到的方案都是直接取“_entries”私有字段。但在7.0版本之后被包裹在......
  • 缓存+数据库构建高可靠的扣减方案
    数据库和纯缓存实现的扣减方案数据库方案的性能较差;纯缓存方案虽不会导致超卖,但因缓存不具备事务特性,极端情况下会存在缓存里的数据无法回滚,导致出现少卖的情况。......
  • 解决移动端safari等浏览器,无法在新标签打开url的问题——window.open无效
    移动端safari浏览器无法通过window.open在新标签打开链接。因为浏览器为了避免弹出广告影响用户,禁用了通过代码调用超链接在新标签打开页面的功能。这就意味着,要想在新标签......
  • 配运基础数据缓存瘦身实践
    作者:京东物流 张仲良一、背景:在现代物流的实际作业流程中,会有大量关系到运营相关信息的数据产生,如商家,车队,站点,分拣中心,客户等等相关的信息数据,这些数据直接支撑齐了物......
  • 缓存算法介绍
    缓存算法(页面置换算法)之LRU算法LRU进阶之LRU-K和2Q缓存淘汰算法(LFU、LRU、ARC、FIFO、2Q)分析LRU(LeastRecentlyUsed)算法思想每次内存溢出时,把最长时间未被访......
  • 【Azure Redis 缓存】使用StackExchange.Redis,偶发ERROR - Timeout performing HSET
    问题描述使用StackExchange.Redis作为Redis客户端SDK,连接AzureRedis服务,长期运行后发现,每天都偶发TimeoutError。错误消息如下: StackExchange.Redis.RedisTimeou......
  • 缓存数据库redis 及各种value数据类型的使用
    Redis介绍与安装redis:缓存数据库(大部分时间做缓存,不仅仅可以做缓存),非关系型数据库【区别与mysql关系型数据库】nosql:非关系型数据库c语言写的服务(监听端口)......
  • 解决Edge浏览器顶部出现“此版本的Windows不再支持Microsoft Edge”的烦人提示
    在Win7中,安装MicrosoftEdge,升级到“109.0.1518.55(正式版本)”后,打开Edge会弹出提示:此版本的Windows不再支持MicrosoftEdge。升级到Windows10或更高版本,以从Mic......
  • 前端性能精进之浏览器(三)——图像
    前端性能精进之浏览器(三)——图像HTTPArchive在2022年关于多媒体的报告中指出,目前大概有99.9%的网站或多或少都会包含点图像。并且高达70%的移动页面和......
  • redis缓存数据库
    redis缓存数据库redis介绍与安装缓存数据库,非关系型数据库(nosql),由c语言写的服务端用于在内存中存取数据(读取速度快)速度快的原因有纯内存操作网络模型使用的IO多......