JS的定时到底有多不准

博客逐步迁移到,独立博客,原文地址,http://www.woniubi.cn/js_hide_tab_setinterval/

我们一直都在说,JS的定时非常的不准确,但是很少有人去验证他,今天我就来验证一下。首先我们准备一个简单的例子。


简单例子

每隔一秒钟,然后输出离最开始的时间差距有多大。

 <script type="text/javascript">
        var begin = (new Date()).getTime();
        var i = 0;
        setInterval(function(){
            ++i;
            var now = (new Date()).getTime();
            var intvals = ((now - begin)/1000).toFixed(3);
            var str = "num:" + i + ";use time:" + intvals;
            console.log(str);
        },1000);
 </script>

  

然后我们看一下输出结果。

看起来结果这没有什么呀,每次只是延时1ms而已,对于我来说,没有什么影响。

世界不可能永远都是平静的,当资源变成了稀缺,竞争加剧的时候,一切都不是那么美好了。


非活动Tab

非活动Tab,就是非当前Tab。浏览器有一种机制,就是优先保证当前Tab资源优先使用。我们可以换一种方式说。

活动Tab,相当于太子,其他的都是一些阿哥。如果太子吃肉,阿哥可以也干粮。太子连干粮也吃的话,阿哥们只能喝汤了,还是一些阿哥抢着喝汤。没办法,资源就是这么多,不是我不想给你。

这个例子也很简单,就是活动Tab干一件非常消耗CPU的事情,然后我们过一会去观察我们刚才的Tab。

for(var i = 0;i!=100000;++i){
            console.log(i);
    }
 

这次结果就不是那样简单了,看看,这是多么不靠谱的定时呀。


活动Tab

其实你也许说这不能反应问题,如果非活动页面如果做耗时CPU,活动页面定时一样不准?我就做了这么一个测试。结果是这样的

活动Tab就是不一般呀,延时只是稍微变慢了一点。

时间: 2024-12-19 10:48:04

JS的定时到底有多不准的相关文章

js settimeout定时 for循环问题 闭包

js settimeout定时 for循环问题 闭包先做个笔记 留待研究 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.7.2.min.js&q

JavaScript-读 You Dont Know JS,this到底是什么

前端技术更新很快,几个月前我还在写React,现在又有人建议我学学Vue了.思考之后决定先沉下心来补补JavaScript基础.You Dont Know JS一系列书不错.这一系列博客是我读这本书以后总结的干货. 为什么要使用this 知乎的习惯是先问是什么,再问为什么,到这篇博客却要翻过来讲.如果没有需要使用this的场景,那我们就没必要知道this到底是什么了. 请看下面的例子: // 使用this的动机 function tellName(){ console.log('name is'

js 页面定时刷新

html <label class="am-switch am-switch-lg"> <input type="checkbox" id="check_is_f"> <span class="am-switch-checkbox"></span> </label> 定时刷新 js //定时刷新 is_f = localStorage.getItem("is

js 中this到底指向哪里?

其实js的this指向很简单.我们记住下面3种情况. this 指向的是浏览器中的window.代码如下: function fn(){ this.name='yangkun'; this.age=28; } 当我们执行fn()的时候,这个普通函数中的this指向到底是什么?答案就是指向的是浏览器中的window.(这里说明,这里实在浏览器下,如果是node环境不是). 如果这个时候我们对上面的函数进行进一步操作: function fn(){ this.name='yangkun'; this

引入CSS和JS文件时 到底应该在head标签中还是body中?

引入CSS在head中, JS建议在body的尾部引入; 这样有利于加载速度 <!DOCTYPE html> <html>   <head>      <!--网页页面字符集-->     <meta charset="utf-8">       <!--让IE使用最新的渲染模式-->     <meta http-equiv="X-UA-Compatible" content="

[JS] this, 你到底指向谁?

JS中, this的值取决于调用的模式, 而JS中共有4中调用模式: 1. 方法调用模式 当一个函数被保存为对象的一个属性时, 我们称它为一个方法, 当一个方法被调用时, this指向该对象, 如: var obj = {  value: 1,  getValue: function() {   alert(this.value);  } }; obj.getValue(); // 输出1, 此时的this指向obj 注意: 该模式中, this到对象的绑定发生在方法被调用的时候. 2. 函数调

【转】JS 的 new 到底是干什么的?

原文:https://zhuanlan.zhihu.com/p/23987456?refer=study-fe 大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不应该引入另一个更复杂的事物. 今天我从「省代码」的角度来讲 new. --------------------------- 想象我们在制作一个策略类战争游戏,玩家可以操作一堆士兵攻击敌方. 我们着重来研究一下这个游戏里面的「制造士兵」环节. 一个士兵的在计算机里就是一堆属性,如下图: 我们只需要这

JS中this到底指向谁?

关于this的指向,是一个令人很头疼的问题.但是,你运气好,碰到了我.老夫这儿有本祖传秘籍,看懂这个,妈妈再也不用担心你的this指向不对啦! 归根结底,this指向就一句话:谁最终调用函数,this指向谁!!! 关于这点,老夫有三言相赠: ① this指向的,永远只可能是对象!       ② this指向谁,永远不取决于this写在哪!而是取决于函数在哪调用.       ③ this指向的对象,我们称之为函数的上下文context,也叫函数的调用者. 下面,请看具体情况. ① 通过函数名(

JS中this到底指哪个对象

忘了原作者是谁了   自己也添加了一些东西  勉强可以观看一下 元素就不写了   可以自己添一下试试 先看这段代码 target.onclick = function(){ console.log(this); } 答案打印的一定是target对象本身 任何的话都需要语境,上下文环境,放在不同的地方,含义可能就大不相同. 当有一个人对着你大喊一声:开! 如果你手里有把枪,你会扣动扳机.如果你坐在汽车里,你会踩油门.如果你站在阳台,你可能会打开窗户. THIS身为一个关键字,它所指代的是此刻正在运