首页 > 其他分享 >完美解决 - 前端发版后浏览器缓存问题

完美解决 - 前端发版后浏览器缓存问题

时间:2024-01-27 11:36:48浏览次数:24  
标签:index 缓存 浏览器 前端 cache html 发版后

一、简介

  • 开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了。

  • 浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。

  • 附:前端缓存详解,看了这篇更容易理解缓存配置的概念,浏览器缓存主要有两类:协商缓存 和 彻底(强)缓存

    例如:program、cache-control 和 expires 都是前端缓存的关键字段,优先级是 pragma > cache-control > expirespragma 是旧产物,已经逐步抛弃,有些网站为了向下兼容还保留了这个字段。

二、解决方案

1、在 .html 页面加 meta 标签

  1. <meta http-equiv="pragram" content="no-cache">
  2. <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  3. <meta http-equiv="expires" content="0">

2、后端 nginx 配置,让 index.html 不缓存

vue 默认配置,打包后 css 和 js 的名字后面都加了哈希值,不会有缓存问题,但是 index.html 在服务器端可能是有缓存的,需要在服务器配置不让缓存 index.html

  1. location = /index.html {
  2. add_header Cache-Control "no-cache, no-store";
  3. }

标签:index,缓存,浏览器,前端,cache,html,发版后
From: https://www.cnblogs.com/zhyp/p/17991236

相关文章

  • Google浏览器Provisional headers are shown. Disable cache to see full headers.
    Google浏览器Provisionalheadersareshown.Disablecachetoseefullheaders.问题解决方法勾选禁用缓存,刷新成功......
  • edge浏览器中GPT方法
    1、edge浏览器2、打开扩展3、打开《打开MicrosoftEdge加载项》(需开启w网)**4、搜索“movetab”。5、获取**《Movetab新标签页(ChatGpt免费)》6、扩展——管理扩展——启动Movetab7、打开新标签,即出现ChatAI.参考:......
  • 物联网浏览器(IoTBrowser)-顶尖OS2电子秤协议实现
    本教程基于  物联网浏览器(IoTBrowser)-Web串口自定义开发 ,详细的过程可以翻看之前的文章。本篇以实现顶尖OS2系列电子秤协议对接,并集成到IoTBrowser平台。由于没有找到OS2协议的官方文档,用串口助手抓包分析了一下,简单封装了一下实现代码有点潦草。所有的串口或者需要实时数......
  • Redis缓存优化项目
    Redis数据库基础Redis数据库概述Redis是一个基于内存的key-value结构数据库,即非关系型数据库(NoSql)数据库并不是要取代关系型数据库,而是关系型数据库的一种补充。Redis是互联网技术领域使用最为广泛的存储中间件,他是用C语言开发的一个开源的高性能键值对(key-value)数据库,官方......
  • 基于CefSharp、WPF开发浏览器项目----系列文章
    基于CefSharp、WPF开发浏览器项目基于CefSharp开发浏览器(十一)增添F11、F12功能基于CefSharp开发浏览器(十)CefSharp.Wpf中文输入法偏移处理基于CefSharp开发浏览器(九)浏览器历史记录弹窗面板基于CefSharp开发浏览器(八)浏览器收藏夹栏基于CefSharp开发浏览器(七)浏览器收藏夹菜单基......
  • Redis篇-redis使用场景-缓存-缓存雪崩-04
    1缓存雪崩缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机,导致大量请求到达数据库,带来巨大压力。解决方案:给不同Key的TTL添加随机值;利用Redis集群提高服务的可用性;哨兵模式、集群模式给缓存业务添加降级限流策略;ngxin或springcloudGateway给业务添加......
  • go-zero配置DB的redis缓存
    配置定义:#catinternal/config/config.gopackageconfigimport( "github.com/zeromicro/go-zero/rest" "github.com/zeromicro/go-zero/core/stores/cache")typeConfigstruct{ rest.RestConf CacheRediscache.CacheConf}对应的配置文件:#cat......
  • [转]vs2019升级后,启动调试,谷歌浏览器无法正常使用 - 温故纳新 - 博客园
    解决方法:vs2019按如下步骤设置:工具  =》 选项  =》调试 =》 常规 =》勾选“启用APS.NET 的 Javascript 调试(Chrome和IE)”---------------------作者:温故纳新来源:CNBLOGS原文:https://www.cnblogs.com/tomorrow0/p/14383870.html版权声明:本文为作者原创文章,转载请......
  • 解决IE浏览器textarea标签placeholder不生效的问题
    IE10给textarea设置了placeholder,F12控制台打印document.getElementById(id).getAttribute('placeholder'),可以看到placeholder的值,但是浏览器不显示,可以再添加如下代码显示出来,不需要引用JQuery,前提是该元素已经设置了placeholder属性,并且浏览器支持placeholder,IE8和IE9不支持,参......
  • 基于CefSharp开发浏览器(十)浏览器CefSharp.Wpf中文输入法偏移处理
    一、前言两年多来未曾更新博客,最近一位朋友向我咨询中文输入法问题。具体而言,他在使用CefSharpWPF版本时遇到了一个问题,即输入法突然出现在屏幕的左上角。在这里记录下处理这个问题的过程,希望能够帮助到其他遇到类似问题的开发者。让我们一起来探讨如何解决能更好的处理CefSharp......