浏览器非活动页定时器执行频率下降的问题

最新推荐文章于 2024-04-18 10:10:00 发布
最新推荐文章于 2024-04-18 10:10:00 发布
阅读量647 收藏 3
点赞数
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53205125/article/details/130168530
版权

        当我们使用setTimeout或者setInterval等计时器的时候,如果我们设置了0.1秒执行一次,但当我们切换了活动页,或者我们最小化了浏览器,这时因为浏览器的省电策略,会把我们的计时器延长为1s执行一次.下面简单测试一下.

        代码:

        正常情况下即当前页是活动页输出结果: 

可以看到大概是一秒输出了十次,现在再来看看我把浏览器页面最小化之后的输出:

这就变成了1s才执行一次,这是因为浏览器的省电策略,浏览器认为当我们当前页面不在活动页了,就不太需要占用资源,就把我们的计时器频率变慢了.

解决方法就是使用webWorker,把计时器放在其他的线程去执行. 

简单实现:

 

现在看执行结果:

 

当我把浏览器最小化的时候完全不影响webWorker线程里的计时器的执行.

 在vue项目中直接安装引用hackTimer就可以.

麦浪丶
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HackTimer, 当选项卡处于非活动状态时，避免按浏览器限制计时器.zip
09-18
HackTimer, 当选项卡处于非活动状态时，避免按浏览器限制计时器 HackTimer当选项卡处于非活动状态时，避免按浏览器限制计时器用法：将脚本引用放在 HackTimer.js ( 或者 HackTimer.min. js ) 之前，然后再放置其他任何 JavaScript 。 这包括类似jQu
vc++实现非窗口类中使用定时器的方法
11-06
vc++实现非窗口类中使用定时器的方法 没有用消息处理函数Ontimer
【浏览器非活动定时器触发频率下降】问题及解决方案
Ljy_up的博客
03-14 508
但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。而且它是不受浏览器资源的限制，处于独立的线程，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用。当浏览器处于非活动标签状态下（即切换到其他窗口或者将本窗口最小化后）原本项目中的定时器发生了延迟调用，调用过程越来越慢，当离开当前页面时间较长时,cpu检测到你不在当前页面,为了节省资源,会放慢浏览器的时间，导致定时器调用时间延长，原本一秒请求一下的，可能变成了一分钟请求一下。
HackTimer：提升编程效率的神奇工具
gitblog_00054的博客
04-18 351
HackTimer：提升编程效率的神奇工具 项目地址:https://gitcode.com/turuslan/HackTimer 项目简介 HackTimer 是一个轻量级但功能强大的计时器应用，专为程序员和开发者设计，用于跟踪他们在各种任务上的时间投入。通过精确的时间统计，它帮助用户更好地理解自己的工作模式，从而优化工作流程，提高生产力。 技术分析 跨平台：基于 Electron 框架开发...
浏览器非活动页定时器执行频率下降问题
shuxiaohua的博客
01-21 2664
背景 客服系统需要检测坐席是否下线，否则服务端将进线分配给离线的坐席，消费者得不到坐席的回应，影响消费者体验。系统为了检测消费者是否下线，增加了心跳逻辑，页面每2秒上报一次心跳。服务端30秒内未收到心跳，就认为坐席下线。 现网偶发坐席不断切换状态（上线->下线->上线->下线…） 经定位现代浏览器为了省电，当页面切到后台（非当前活动页），5分钟后浏览器会降低js定时器的执行频率（1分钟一次）。导致心跳机制受到影响。 该设计具体可以google(Throttling Javascript T
浏览器切换计时器不按时执行的解决方法
魏洋的博客
04-03 970
1、使用workers if (typeof (Worker) !== "undefined") { var w = new Worker("workers.js"); if (typeof (w) !== "undefined") { w.postMessage(now); w.onmessage = functi...
解决Edge浏览器一定时间后页面不刷新的问题
大奖状的博客
12-28 4026
电脑知识，edge浏览器
555定时器 - 频率和占空比计算器
07-27
本文介绍了555定时器 - 频率和占空比计算器
C#定时器实现自动执行的方法
09-03
主要介绍了C#定时器实现自动执行的方法,实例分析了C#定时器参数的设置及方法的调用与实现,需要的朋友可以参考下
STM32F103C8 定时器捕获 频率计
最新发布
05-27
STM32F103C8 定时器捕获 频率计
定时器重复执行.html
06-03
定时器重复执行.html
接受各种频率范围的硬件看门狗定时器
01-19
微控制器通常都需要一个看门狗定时器，用于在大电流或大电压时保持在安全条件下。因此很多微控制器都内置了看门狗定时器。不过，有人也可能愿意用外接电路。外接看门狗电路会检查微控制器代码的完整性，当它判断微...
220915浏览器网页失去焦点后，定时器被降速
u010433190的博客
09-15 334
javascript脚本里面通过定时器，每秒钟向服务端发送一次心跳包。在网页失去焦点5分钟后，定时器降速，服务器每分钟才能收到一次心跳，如果判断时间门槛低于1分钟，就会误判客户端心跳丢失。firefox chrome edge都是这样做的，在网页失去焦点大约5分钟后，定时器被降速为1分钟触发一次。
浏览器页面处于不活跃状态时setInterval不定时执行
ZSLOGIN的博客
09-27 1252
项目要求，每隔15s定时请求后台接口以记录进度，离开当前窗口请求不结束，除非手动关闭。
vuejs: 解决浏览器切换页面后setInterval计时器停止执行的问题
qq_39460057的博客
11-27 2924
Worker-Loader插件的主要作用是将我们的JavaScript文件转换为Web Worker线程。它可以将我们的JavaScript文件打包成一个独立的文件,该文件可以在Web Worker中运行。如果需要在切换页面后继续执行定时器，可以使用Web Worker，它是在后台运行的程序，不受页面切换影响。setInterval定时器是基于当前页面的，如果切换到其他页面，定时器会被暂停。2、配置：在webpack.base.config.js文件中，3、创建js文件：my.worker.js。
ios锁屏或页面隐藏时，定时器setInterval倒计时不执行，解锁显示后才执行的问题
qq_35430000的博客
02-12 3594
手机锁屏后，h5浏览器setTimeout暂停执行了，发送验证码的秒数或倒计时没有继续往下走，遇到这种问题可以用visibilitychange这种方式处理 // 监听页面隐藏（锁屏）或后台执行时，解决定时器不执行的问题 addVisibilitychange(){ let that = this; let start,end,vibS,newS; ...
解决浏览器切换其它窗口最小化定时器失效方案：多线程webWorker
sunyv1的博客
05-21 3473
业务场景 一个考试系统，需要在用户切换窗口或者最小化的时候依然保持倒计时正常进行 技术 webWorker多线程 工具代码 function createWorker(f) { var blob = new Blob(['(' + f +')()']); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); return worker; } export const createWorker
vue 跳转组件 销毁定时器
g56467467464的博客
04-29 1068
我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示： 解决方法1： 首先我在data函数里面进行定义定时器名称： data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器： this.timer = (() => {
pwm定时器输出频率
10-16
PWM定时器输出频率取决于定时器的时钟源和预分频系数，以及计数器的重载值。一般来说，输出频率可以通过以下公式计算： PWM频率 = 定时器时钟源频率 / （预分频系数 * 计数器重载值） 例如，如果定时器时钟源频率...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值