Electron+Vue3+Vite+Element-Plus，保持软后台全速运行（解决循环过多导致的界面不刷新问题，保证窗口失去焦点后setTimeOut可用）
文章目录
- Electron+Vue3+Vite+Element-Plus，保持软后台全速运行（解决循环过多导致的界面不刷新问题，保证窗口失去焦点后setTimeOut可用）
- 问题描述
- 问题一 大循环界面刷新不及时
- 大循环解决
- 循环降速，保证刷新
- 问题二 保证setTimeout的可用性
- 问题解决
- 插件安装
- 使用
- 空白音源获取
Electron+Vue3+Vite+Element-Plus，保持软后台全速运行（解决循环过多导致的界面不刷新问题，保证窗口失去焦点后setTimeOut可用）
问题描述
在开发时遇到的问题。我使用electron和vue建立的软件需要保证在后台能够全速运行，但在开发过程中遇到了一些问题，首先是对于几十万次甚至几百万次循环导致的界面卡死，无法刷新问题的解决；其次是浏览器内核使setTimeOut在窗口处于后台时，setTimeOut失效问题的解决。
问题一 大循环界面刷新不及时
第一次尝试使用js开发软件，软件需要处理几个、几十个甚至几百个拥有80万行的文本文件，循环次数到达了几百万次。
大循环解决
达夫设备
//example: 我有一个1w次的循环需要处理，如何采取高效的循环？
let arrayExample:string[] = [];
arrayExample.length = 10000;
arrayExample.fill('----------');
var len = arrayExample.length;//通常情况下，一般采用的循环方法为fori,在这种情况下，没循环一次都要重新进入一次。
for (let i = 0; i < len; i++){console.log(arrayExample[i])
}//达夫设备
//我们可以看作for循环里面的内容是一个函数，Soconst process = (i:number)=>{console.log(arrayExample[i])
}//我们还可以利用case的特性，当case里面没有break时，case会一直运行到底，Solet startAt = len % 8，iterations = Math.ceil(len/8),j = 0;do{switch (startAt) {case 0: process(j++);case 7: process(j++);case 6: process(j++);case 5: process(j++);case 4: process(j++);case 3: process(j++);case 2: process(j++);case 1: process(j++);}startAt = 0;
} while (--iterations);
经过上述办法，循环的速度得到了改善，但是界面不刷新的问题依旧存在。
循环降速，保证刷新
如何做到循环速度的降低呢？
循环固定次数后暂停10ms？
我在代码中使用了一个sleep函数，并用async修饰了处理函数，得到的效果如下：
//sleep函数的实现function sleep(i:number) {return new Promise((resolve)={setTimeout(resolve, i);});
}//当然，sleep函数不是必要的，你也可以在await时直接进行return。//我的处理函数
async function txtProcess(rootDirList:any) {......do {//其实我的await在进度改变时才会使用await sleep(10);switch (startAt) {case 0: process(lineValue, j++);...}}
}
经历了上面的改动，保证了界面的流畅刷新，但当我用控制台挡住运行界面时，发现软件的运行速度大大降低。
问题二 保证setTimeout的可用性
通过在网上的寻找，我在stackoverflow找到了问题的原因和解决办法。
方法来源地址：StackOverflow同时还有setInterval的解决办法。
原因：Most of the modern browsers (Chrome, Firefox and IE), intervals (window timers) are clamped to fire no more often than once per second in inactive tabs.
大多数现代浏览器（Chrome、Firefox 和 IE）、间隔（窗口计时器）都被限制为在非活动选项卡中每秒触发一次的频率不超过一次。
问题解决
The Chromium insider also clarified that aggressive throttling will be automatically disabled for all background tabs “playing audio” as well as for any page where an “active websocket connection is present.”
对于所有“播放音频”的后台选项卡以及“存在活动的 websocket 连接”的任何页面，都会自动禁用激进的节流。
播放空声音会强制浏览器保留性能。
插件安装
npm i --save-dev howler
或者通过cnpm安装
cnpm i --save-dev howler
插件地址：Howler.js
使用
//依赖引用
import {Howl, Howler} from 'howler';
const {Howl, Howler} = require('howler');
//声音播放实现let sounds = new Howl({src: ['empty_loop_for_js_performance.wav'],volume:0.5,autoplay: true, loop: true,
});function performance_trick()
{if(sounds.empty) return sounds.empty.play();sounds.empty = new Howl({src: ['empty_loop_for_js_performance.wav'],volume:0.5,autoplay: true, loop: true,});
}
空白音源获取
empty_loop_for_js_performance.wav
Electron+Vue3+Vite+Element-Plus，保持软后台全速运行（解决循环过多导致的界面不刷新问题，保证窗口失去焦点后setTimeOut可用）相关推荐
- Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
- 基于 vue3.x + vite + element plus，适配手机、平板、pc 的后台开源免费模板库
介绍 vue-next-admin 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + ...
- vue3+vite+antd——后台管理系统——基础模板
2023年了,让我看看谁还不会用vue3,其实我也不太会.... 不会就学啊,别的不说,潜力无穷.下面就把我从网上找到的一个后台管理系统模板放在下面了,需要自取. 该系统模板还是不太完善,后续完善后, ...
- vue3+vite+electron项目搭建
vue3+vite+electron项目搭建 一.vite创建新项目 二.安装项目依赖 三.修改package.json文件 添加build节点 修改scripts节点 添加main节点 packag ...
- 【几乎最全/全网最长的 2 万 字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
文章目录 一.完整构建流程 1.在指定目录下执行 pnpm init,初始化 package.json 2.执行 pnpm install vite -D,安装 vite. 3.package.jso ...
- 使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架 这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...
- 使用 Vue3 + vite + elementUI 开发一个 Utools Markdown 编辑器插件
文章目录 目的 开发文档整理 基础工具的集成 初始化项目 框架引入 按需引用和 SASS 引入验证 utools 开发配置 调试和打包插件 功能实现 依赖库的安装调用 布局实现 Editor.vue ...
- 前端VUE3+Vite -- 框架搭建
这里写目录标题 整理环境 Vite 为什么选 Vite 构建 Vite总结 初始化项目 element-plus 构建使用 配置全局 Vuex 什么是VueX: 为什么选用 Vuex 总结 构建 Ro ...
- 【Vue3+vite+Element-UI Plus 】
1 Vue3 + vite + Element-UI Plus 全局配置 在终端中利用命令 npm init vite-app 项目名称 ,创建基于 vite 的 vue3 项目 利用命令 npm i ...
最新文章
- HDU 1043 Eight（双向BFS+康托展开）
- PHPCMS v9 二次开发_验证码结合Session开发
- Linux中的通配符
- 里氏替换原则→类型转换
- tensorflow处理简单线性回归
- SQL基础整理——例题
- java edittext 输入监听_Android应用开发之Android EditText 监听用户输入完成的实例
- CSS图片裁剪Clip
- 两台笔记本的操作系统都为xp的共享上网教程
- SQL Server 锁
- 如何监控主从故障是否正常？MySQL数据库
- 持久化配置管理 diamond 使用简介
- Cocos Creator | 碰撞检测优化-四叉树
- 高性能计算机英语,“超级计算机”英语怎么说
- win7系统安装记录
- 《给你一个团队你怎么带》笔记（绝多数为个人经验，仅供参考）
- opencv-python 去除图片文字
- gis计算频数_频数 (分析)
- Ubuntu-18.04版本网络配置，连接网络的方法
- aerospike备份与还原