Vue3 + TS 自动检测线上环境 —— 版本热更新提醒

 🐔 前期回顾f8e3cc1a0f694ac2b665ca2ad14c49d7.png

编写 loading、加密解密 发布NPM依赖包,并实施落地使用_彩色之外的博客-CSDN博客

目录

🌍  问题产生

🤖 性能效率

🪂 新建 autoUpdate.ts 

 🎋 在App.vue使用


🌍  问题产生

        当用户在当前站点停留时间比较长,中途站点进行升级更新之后,用户如果不刷新页面就任然停留在旧的页面里,如何让用户收到一个提示,引导用户进行更新操作呢? 

🤖 性能效率

         本文仅仅简单介绍了实现线上更新的一种思路,相比在生产环境下实现热更新,或者是使用websocket相对来说都是比较麻烦的,而且还需要改动服务器,这种做法只需要一小段js函数即可解决,并且效率也是非常高的,对整个系统的运行,基本上是没有任何负面影响,因为单页面模式下,每次请求的页面实际上传输的数据非常少,所以20秒一次,完全不会给站点增加负荷。

在线上环境中,自动刷新页面可能会带来一些资源性能问题,具体取决于以下几个因素:

1. 刷新频率:代码中使用了 `setTimeout` 定时调用 `needUpdate` 函数来判断是否需要更新页面,刷新频率由 `DURATION` 变量决定。如果刷新频率设置得太高,比如每秒钟都刷新一次,会增加服务器和客户端的负载,可能导致性能问题。

2. 脚本文件数量:如果页面中的脚本文件数量很多,每次刷新都需要重新加载和解析这些脚本文件,会增加网络请求和浏览器的 CPU 使用量,可能导致页面加载速度变慢和性能下降。

3. 脚本文件大小:如果页面中的脚本文件大小很大,每次刷新都需要下载这些大文件,会增加网络请求的时间和带宽消耗,可能导致页面加载速度变慢和性能下降。

为了减少资源性能问题,可以考虑以下几点:

1. 调整刷新频率:根据实际情况,合理设置刷新频率,避免过于频繁的刷新。

2. 使用缓存:在服务器端设置适当的缓存策略,使得脚本文件能够被客户端缓存起来,减少重复下载和解析的次数。

3. 优化脚本文件:对脚本文件进行合并、压缩等优化操作,减小文件大小,提高加载速度。

4. 使用增量更新:如果可以,可以只更新发生变化的脚本文件,而不是每次都重新加载全部脚本文件。

综上所述,虽然自动刷新页面可能会带来一些资源性能问题,但通过合理的设置和优化,可以减少这些问题的发生和影响。在实际应用中,需要根据具体情况进行评估和优化。

🪂 新建 autoUpdate.ts 

import { ElMessageBox } from 'element-plus';let lastScripts: string[] = [];/* 获取html中script标签的src属性值 */
async function extractNewScripts(html: string): Promise<string[]> {const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm;const result: string[] = [];let match;while ((match = scriptReg.exec(html))) {result.push(match.groups?.src ?? '');}return result;
}/* 判断浏览器是否需要更新数据 */
async function needUpdate(): Promise<boolean> {const newScripts = await extractNewScripts(await fetch('/').then((resp) => resp.text()));if (!lastScripts.length) {lastScripts = newScripts;return false;}if (newScripts.length !== lastScripts.length) {lastScripts = newScripts;return true;}for (let i = 0; i < lastScripts.length; i++) {if (lastScripts[i] !== newScripts[i]) {lastScripts = newScripts;return true;}}return false;
}/* 延时时间20s */
const DURATION = 20 * 1000;/* 自动刷新 */
export const autoRefresh = (): void => {setTimeout(async () => {const willUpdate = await needUpdate();if (willUpdate) {ElMessageBox.confirm('页面有更新,点击确定刷新页面?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {location.reload();}).catch(() => {});} else {autoRefresh(); // 如果不需要更新数据,继续执行下一次判断}}, DURATION);
};

 🎋 在App.vue使用

import { autoRefresh } from '/@/utils/autoUpdate';
onMounted(() => {nextTick(() => {if (import.meta.env.MODE !== 'development') autoRefresh();});
});

这样当项目通过ci cd部署版本更新时候,用户就会收到更新提示

全文结束,所有代码都在文中。

7730e2bd39d64179909767e1967da702.jpeg

 _______________________________  期待再见  _______________________________ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/89917.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《扩散模型 从原理到实战》Hugging Face (二)

第二章 Hugging Face简介 本章无有效内容 第三章 从零开始搭建扩散模型 有时候&#xff0c;只考虑事情最简单的情况反而更有助于理解其工作原理。本章尝试从零开始搭建廓庵模型&#xff0c;我们将从一个简单的扩散模型讲起&#xff0c;了解其不同部分的工作原理&#xff0c;…

IntelliJ IDEA快速查询maven依赖关系

1.在Maven窗口中点击Dependencies->show Dependencies 2.得到依赖关系图 此时原有快捷键Ctrlf可以查询jar包&#xff0c;如果没有查询菜单出来则设置快捷键方式为 File->Settings->Keymap->搜索栏输入find->在Main Menu下Edit下Find下Find双击算则Add keyboard…

云可观测性安全平台——掌动智能

云可观测性安全平台是一个跨架构、跨平台的可观测性方案&#xff0c;实现对云环境下的细粒度数据可视化&#xff0c;满足安全部门对云内部安全领域的多场景诉求&#xff0c;包括敏感数据动态监管、云网攻击回溯分析、攻击横移风险监控、云异常流量分析。本文将介绍掌动智能云可…

Oracle 11g_FusionOS_安装文档

同事让安装数据库&#xff0c;查询服务器信息发现操作系统是超聚变根据华为openEuler操作系统更改的自研操作系统&#xff0c;安装过程中踩坑不少&#xff0c;最后在超聚变厂商的技术支持下安装成功&#xff0c;步骤可参数该文。 一、 安装环境准备 1.1 软件下载 下载地址:…

ubuntu 20 安装 CUDA

1. 查看需要安装的cuda版本 nvidia-smi cuda的版本信息如下图所示 2. 去官网下载对应版本的CUDA 官网&#xff1a;CUDA Toolkit Archive | NVIDIA Developer 弹出以下界面&#xff0c;依次点击以下按钮 得到以下内容&#xff1a; 复制下载链接&#xff0c;下载cuda11到本…

Selenium Webdriver自动化测试框架

最近正在编写selenium webdriver自动化框架&#xff0c;经过几天的努力&#xff0c;目前基本已经实现了一套即能满足数据驱动、又能满足Web关键字驱动的自动化框架&#xff08;主要基于 antjenkinstestngselenium webdriverjxl实现&#xff09;。通过这次的自动化框架开发&…

ChatGPT 在机器学习中的应用

办公室里一个机器人坐在人类旁边&#xff0c;Artstation 上的流行趋势&#xff0c;美丽的色彩&#xff0c;4k&#xff0c;充满活力&#xff0c;蓝色和黄色&#xff0c; DreamStudio出品 一、介绍 大家都知道ChatGPT。它在解释机器学习和深度学习概念方面也非常高效&#xff0c;…

外壳防护等级的最低要求

声明 本文是学习GB-T 3027-2012 船用白炽照明灯具. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了船用白炽照明灯具(以下简称灯具)的要求、试验方法、检验规则、标识、包装和储 存等。 本标准适用于电源电压在250V 以下的交流…

巨人互动|Facebook海外户Facebook的特点优势

Facebook作为全球最大的社交媒体平台之一&#xff0c;同时也是最受欢迎的社交网站之一&#xff0c;Facebook具有许多独特的特点和优势。本文小编将说一些关于Facebook的特点及优势。 1、全球化 Facebook拥有数十亿的全球用户&#xff0c;覆盖了几乎所有国家和地区。这使得人们…

layui 树状控件tree优化

先上效果图&#xff1a; 我选的组件是这个&#xff1a; 动态渲染完后&#xff0c;分别在窗体加载完成&#xff0c;节点点击事件分别加入js&#xff1a; //侧边栏图标替换//layui-icon-subtraction$(function () {$(".layui-icon-file").addClass("backs&quo…

在EXCEL中构建加载项之创建加载项的目的及规范要求

【分享成果&#xff0c;随喜正能量】一句南无阿弥陀佛&#xff0c;本是释迦牟尼佛所证的无上正等正觉法&#xff0c;洒在娑婆世界的众生海中&#xff0c;只为末世众生能够以信愿之心抓住此救命稻草&#xff0c;要知道今世人此生的处境&#xff0c;可能只剩这道要么极乐要么三涂…

【华为云云耀云服务器L实例评测】- 云原生实践,快捷部署人才招聘平台容器化技术方案!

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

数据结构与算法(C语言版)P8---树、二叉树、森林

【本节目标】 树概念及结构。二叉树概念及结构。二叉树常见OJ题练习。 1、树概念及结构 1.1、树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一颗倒挂的树&#xf…

泽众APM性能监控软件

泽众Application Performance Management&#xff08;简称APM&#xff09;是一款专业的性能监控工具&#xff0c;可以对全链路如Web服务器、应用服务器、数据库服务器等进行实时监控&#xff0c;并以图表化的形式直观地呈现监控数据&#xff0c;为系统性能优化和定位问题提供准…

Caddy Web服务器深度解析与对比:Caddy vs. Nginx vs. Apache

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

基于SpringBoot的大学生就业招聘系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 求职信息管理 首页 招聘信息管理 岗位申请管理 岗位分类 企业管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展&#xff0c;大学生就业成为一个难题&#xff0c;好多公司都舍不…

最新AI写作系统ChatGPT源码/支持GPT4.0+GPT联网提问/支持ai绘画Midjourney+Prompt应用+MJ以图生图+思维导图生成

一、智能创作系统 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&…

使用光纤激光切割机等激光切割设备时的一些小诀窍

光纤激光切割机极大地提高了钣金加工行业切割效果和生产效率。然而在我们对客户的回访调查中&#xff0c;发现客户普遍存在着对光纤激光切割机设备的保养维护意识不足的问题&#xff0c;这严重影响了设备的正常使用和使用寿命。 虽然激光切割机有日常的保养&#xff0c;但是也需…

jvm垃圾收集算法

简介 由于《分代收集理论》和不同垃圾收集算法&#xff0c;Java堆应该被划分为不同区域&#xff0c;一般至少会把Java堆划分为新生代&#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;两个区域。 垃圾收集器可以只回收其中某一个或者…

力扣每日一题(+日常水几道题)

每日一题1333. 餐厅过滤器 - 力扣&#xff08;LeetCode&#xff09; 简单的按规则排序,去除几个不满足的条件然后排序返回即可 #include<algorithm> class Solution { public:vector<int> filterRestaurants(vector<vector<int>>& restaurants, …