前端防止浏览器访问旧版 js 和 css 的优化思路

news/2024/7/19 14:29:55 标签: java, css, html, web, js
htmledit_views">
js_content">

点击上方蓝色“架构荟萃”关注我们,输入1024,你懂的

前言

最近发版前端项目,用户经常反馈新添加功能在线上环境不好用,常出现新老页面并存的状况。

 

经前端同事排查发现,实际上只需要重新刷新一下页面就没事了。但是每次去通知用户肯定不现实。所以需要对前端的 js 和 html" title=css>css 等文件采取一定的缓存失效的措施,强制浏览器重新去服务器获取新的 js 代码以及 html" title=css>css 文件。

 

楼主经过实际的项目情况反馈,总结以下两点切实可行的办法,分享给大家,希望对大家有帮助。

  1. 路径后面加时间戳或者随机数的方式

  2. 采用 hash(md5)重命名文件

路径后面加时间戳或者随机数的方式

时间版本号

如果每次发布,针对修改过的 js 或者 html" title=css>css 文件路径加上时间的版本号,一般以年月日拼写。

<script type="text/html" title=java>javascript" src="lib/common.js?v=20190719"/>
<link rel="stylesheet" type="text/html" title=css>css" href="assets/html" title=css>css/ie/ie8.html" title=css>css?v=20190719" />

如果发生紧急情况,需要在一天当中对某些 html" title=css>css 或者 js 文件多次发版,可以把时间精确到时分秒。

目前楼主主推采用加版本号的方式,因为文件太多,只能做增量修改。好处是没有做任何修改js 或者 html" title=css>css 文件可以不用加版本号。

采用随机数

html" title=java>javascript">document.write('<script src=\".lib/common.js?r=' + Math.random() + "\"" + '><\/script>');
一般不建议用随机数的方式,因为每次刷新页面,随机数都会变化,那么浏览器认为一个新的url 需要重新请求服务端获取 js 或 html" title=css>css 文件,不会在使用浏览器本地缓存。同时占用网络带宽,影响服务器响应速度。

采用 hash(md5)重命名文件

可以利用 gulp-rev 或者 webpack

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

例如百度搜索首页,就是利用 hash 给 js和 html" title=css>css文件重命名。

 

推荐阅读

  • 月薪8K,html" title=java>java初级程序员需要掌握的一些面试经验

  • 基于分布式文件系统 FastDFS,利用 Zuul 网关实现滑块验证登录

  • jsp的10年是谁让它如此落幕?

  • 一文读懂阿里大中台、小前台战略

 

Java 技术经理一枚,头条付费专栏《Spring Cloud Alibaba微服务实战match》作者,擅长微服务&分布式、SpringCloud&SpringBoot、工作流。

                     

后台回复 1024 免费领取微服务、微信小程序、面试等视频资料,扫描上图微信二维码(WooolaDuang)进微信群


http://www.niftyadmin.cn/n/1240838.html

相关文章

微信小程序canvas绘制插件

针对小程序新推出的canvas 2d api 简单封装了几个常用功能&#xff0c;用于应付日常海报快捷生成等用途。 <canvas id"myCanvas" type"2d"></canvas>创建canvas const myCanvasawait new AniCanvas(myCanvas)myCanvas输出参数&#xff1a; ca…

cad插件_CAD插件迷你建筑工具箱安装教程

插件下载[名称]&#xff1a;CAD插件-迷你建筑工具箱[大小]&#xff1a;14.9 MB [语言]&#xff1a;简体中文 [安装环境]&#xff1a;Win7/Win8/Win10[支持版本]&#xff1a;CAD2004—2020[32/64位下载链接]&#xff1a;pan.baidu.com/s/16aJpMaLBw3GezKuufP0lfA [提取码]: bye…

利用 Sharding-JDBC 解决数据库读写分离后,数据查询延时问题

点击上方蓝色“架构荟萃”关注我们&#xff0c;输入1024&#xff0c;你懂的 一般熟知 Mysql 数据库的朋友知道&#xff0c;当表的数据量达到千万级时&#xff0c;SQL 查询会逐渐变的缓慢起来&#xff0c;往往会成为一个系统的瓶颈所在。为了提升程序的性能&#xff0c;除了在表…

解决前端跨域问题-搭建反向代理服务器

(:/67f6172bf05d4353bcdb3b8dbdcc5865)] 开发中最常见的跨域问题 跨域问题的出现 “同源策略” &#xff1a;同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源&#xff08;即指在同一个域&#xff09;就是两个页面具有相同的协议&#xff08;prot…

SpringCloud 配置中心服务端配置解析流程分析

点击上方蓝色“架构荟萃”关注我们&#xff0c;输入1024&#xff0c;你懂的 环境准备 启动 Eureka 启动 ConfigServer 启动 aiportal-wsm-service 微服务 Gitlab 配置文件&#xff1a;aiportal-wsm-service、globa、,dbconfig 等yml文件 配置解析入口 在启动 aiportal-wsm-s…

中望CAD的引线标注格式怎么改_大神总结的CAD设计五个段位 快来看看你在哪个阶段...

看到段位&#xff0c;大家可能第一时间会想到时下风靡的各种游戏。但事实上&#xff0c;尽管没有绝对数值&#xff0c;大多数行业都会有其隐性的段位&#xff0c;能让人初步判断自己所处的阶段&#xff0c;我们CAD设计也不例外。今天&#xff0c;不妨分享一位大神总结的CAD设计…

datetime 比较_Python常用标准库之datetime模块

一、概述之前我们整理了time模块的日常用法&#xff0c;处理时间数据的过程中还有一个比较常用的模块就是datetime模块&#xff0c;其应用更为广泛&#xff0c;用于处理日期和时间的类。对于基本的时间表示方法、时间戳、UTC等概念请参考之前的文章&#xff1a;Python常用标准库…

使用 Eureka 简单实现服务健康监控日志分析

1 背景 当我们用 K8s Docker 容器化部署基于 SpringCloud 微服务时&#xff0c;根据实际业务需要&#xff0c;可能会对某些服务采取多节点实例部署&#xff0c;这样可以实现服务的负载均衡及高可用架构。但我们有时为了监控服务的稳定性&#xff0c;除了 K8s 平台提供的控制台…