记录--你敢信?比 setTimeout 还快 80 倍的定时器

这篇具有很好参考价值的文章主要介绍了记录--你敢信?比 setTimeout 还快 80 倍的定时器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--你敢信?比 setTimeout 还快 80 倍的定时器

起因

很多人都知道,setTimeout是有最小延迟时间的,根据MDN 文档 setTimeout:实际延时比设定值更久的原因:最小延迟时间中所说:

在浏览器中,setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms,这通常是由于函数嵌套导致(嵌套层级达到一定深度)。

在HTML Standard规范中也有提到更具体的:

Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.

简单来说,5 层以上的定时器嵌套会导致至少 4ms 的延迟。

用如下代码做个测试:

let a = performance.now();
setTimeout(() => {
  let b = performance.now();
  console.log(b - a);
  setTimeout(() => {
    let c = performance.now();
    console.log(c - b);
    setTimeout(() => {
      let d = performance.now();
      console.log(d - c);
      setTimeout(() => {
        let e = performance.now();
        console.log(e - d);
        setTimeout(() => {
          let f = performance.now();
          console.log(f - e);
          setTimeout(() => {
            let g = performance.now();
            console.log(g - f);
          }, 0);
        }, 0);
      }, 0);
    }, 0);
  }, 0);
}, 0);

在浏览器中的打印结果大概是这样的,和规范一致,第五次执行的时候延迟来到了 4ms 以上。

 

记录--你敢信?比 setTimeout 还快 80 倍的定时器

探索

假设就需要一个「立刻执行」的定时器呢?有什么办法绕过这个 4ms 的延迟吗,在 MDN 文档的角落里有一些线索:

如果想在浏览器中实现 0ms 延时的定时器,可以参考这里所说的window.postMessage()

这篇文章里的作者给出了这样一段代码,用postMessage来实现真正 0 延迟的定时器:

(function () {
  var timeouts = [];
  var messageName = 'zero-timeout-message';

  // 保持 setTimeout 的形态,只接受单个函数的参数,延迟始终为 0。
  function setZeroTimeout(fn) {
    timeouts.push(fn);
    window.postMessage(messageName, '*');
  }

  function handleMessage(event) {
    if (event.source == window && event.data == messageName) {
      event.stopPropagation();
      if (timeouts.length > 0) {
        var fn = timeouts.shift();
        fn();
      }
    }
  }

  window.addEventListener('message', handleMessage, true);

  // 把 API 添加到 window 对象上
  window.setZeroTimeout = setZeroTimeout;
})();

由于postMessage的回调函数的执行时机和setTimeout类似,都属于宏任务,所以可以简单利用postMessageaddEventListener('message')的消息通知组合,来实现模拟定时器的功能。

这样,执行时机类似,但是延迟更小的定时器就完成了。

再利用上面的嵌套定时器的例子来跑一下测试:

记录--你敢信?比 setTimeout 还快 80 倍的定时器

全部在 0.1 ~ 0.3 毫秒级别,而且不会随着嵌套层数的增多而增加延迟。

测试

从理论上来说,由于postMessage的实现没有被浏览器引擎限制速度,一定是比 setTimeout 要快的。

设计一个实验方法,就是分别用postMessage版定时器和传统定时器做一个递归执行计数函数的操作,看看同样计数到 100 分别需要花多少时间。

实验代码:

function runtest() {
  var output = document.getElementById('output');
  var outputText = document.createTextNode('');
  output.appendChild(outputText);
  function printOutput(line) {
    outputText.data += line + '\n';
  }

  var i = 0;
  var startTime = Date.now();
  // 通过递归 setZeroTimeout 达到 100 计数
  // 达到 100 后切换成 setTimeout 来实验
  function test1() {
    if (++i == 100) {
      var endTime = Date.now();
      printOutput(
        '100 iterations of setZeroTimeout took ' +
        (endTime - startTime) +
        ' milliseconds.'
      );
      i = 0;
      startTime = Date.now();
      setTimeout(test2, 0);
    } else {
      setZeroTimeout(test1);
    }
  }

  setZeroTimeout(test1);

  // 通过递归 setTimeout 达到 100 计数
  function test2() {
    if (++i == 100) {
      var endTime = Date.now();
      printOutput(
        '100 iterations of setTimeout(0) took ' +
        (endTime - startTime) +
        ' milliseconds.'
      );
    } else {
      setTimeout(test2, 0);
    }
  }
}

实验代码很简单,先通过setZeroTimeout也就是postMessage版本来递归计数到 100,然后切换成 setTimeout计数到 100。

直接放结论,这个差距不固定,在 mac 上用无痕模式排除插件等因素的干扰后,以计数到 100 为例,大概有 80 ~ 100 倍的时间差距。在硬件更好的台式机上,甚至能到 200 倍以上。

记录--你敢信?比 setTimeout 还快 80 倍的定时器

Performance 面板

只是看冷冰冰的数字还不够过瘾,打开 Performance 面板,看看更直观的可视化界面中,postMessage版的定时器和setTimeout版的定时器是如何分布的。

记录--你敢信?比 setTimeout 还快 80 倍的定时器

这张分布图非常直观的体现出了上面所说的所有现象,左边的postMessage版本的定时器分布非常密集,大概在 5ms 以内就执行完了所有的计数任务。

而右边的setTimeout版本相比较下分布的就很稀疏了,而且通过上方的时间轴可以看出,前四次的执行间隔大概在 1ms 左右,到了第五次就拉开到 4ms 以上。

作用

也许有同学会问,有什么场景需要无延迟的定时器?其实在 React 的源码中,做时间切片的部分就用到了。

const channel = new MessageChannel();
const port = channel.port2;

// 每次 port.postMessage() 调用就会添加一个宏任务
// 该宏任务为调用 scheduler.scheduleTask 方法
channel.port1.onmessage = scheduler.scheduleTask;

const scheduler = {
  scheduleTask() {
    // 挑选一个任务并执行
    const task = pickTask();
    const continuousTask = task();

    // 如果当前任务未完成,则在下个宏任务继续执行
    if (continuousTask) {
      port.postMessage(null);
    }
  },
};

React 把任务切分成很多片段,这样就可以通过把任务交给postMessage的回调函数,来让浏览器主线程拿回控制权,进行一些更优先的渲染任务(比如用户输入)。

为什么不用执行时机更靠前的微任务呢?关键的原因在于微任务会在渲染之前执行,这样就算浏览器有紧急的渲染任务,也得等微任务执行完才能渲染。

总结

可以了解如下几个知识点:

  1. setTimeout的 4ms 延迟历史原因,具体表现。
  2. 如何通过postMessage实现一个真正 0 延迟的定时器。
  3. postMessage定时器在 React 时间切片中的运用。
  4. 为什么时间切片需要用宏任务,而不是微任务。

本文转载于:

https://juejin.cn/post/7229520942668824633

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--你敢信?比 setTimeout 还快 80 倍的定时器文章来源地址https://www.toymoban.com/news/detail-821445.html

到了这里,关于记录--你敢信?比 setTimeout 还快 80 倍的定时器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript定时器(setTimeout和setInterval)的用法技巧

    1.满足特定条件时才执行后续步骤。 核心代码: 案例图片: 场景解析:诸如 Promise 的情形,只有接口请求成功后才会执行下一步。有时候不方便使用Promise或者特定情形下,可以借助此定时器( setInterval )方法解决。 友情提醒:业务处理完成后,一定要 清空 ( clearInterval

    2024年02月15日
    浏览(47)
  • 定时器的设置和清除setTimeout、setInterval、setImmediate-NodeJs

    JS是单线程运行逻辑,所有的程序默认在一个线程执行,出现排队执行。所有的定时器中,回调函数会在主线程后事件队列中执行。              一次性定时器的 开启:当间隔时间到了,会调用 一次 回调函数,间隔时间的单位是毫秒。               var timer=setTimeout(回

    2024年02月04日
    浏览(45)
  • Vue3 setup语法糖销毁一个或多个定时器(setTimeout或setInterval)

    如果在页面/组件增加了定时器,就算跳转到其他页面,定时器也不会被清理,这时候就需要手动清理,不然会有意想不到的bug,也会影响性能。 setTimeout是只执行一次,setInterval是循环执行,以下是用setTimeout举例子,如果想要用setInterval,替换一次方法就行。 setTimeout替换成

    2024年02月13日
    浏览(52)
  • 【学习记录】STM32利用定时器中断实现定时闪烁指示灯

    任务:定时闪烁指示灯 任务目标: 掌握 CubeMX 软件配置定时器实现定时功能的方法。 任务内容: 控制开发板上的指示灯LED每隔1s闪烁。 任务实现: 使用的STM32芯片是STM32F407ZET6 第一步:设置高速时钟,设置LED 第二步:配置TIM10时钟为100MHz,故可以设置预分频系数PSC为9999,自

    2024年02月05日
    浏览(60)
  • 关于单片机的分频定时器的记录

    对于单片机的频率原来一直不太明白,现在在学习进行记录: 主频: 分频 对于分频来说,实际就是相当于间接降低这个主频,减少这个震荡次数,比如我分频系数为72,那么我就是1S产生的震荡次数就是72000000/72=1000000次,相当于用少的计数来对一秒钟进行计数。 那么有人好

    2024年04月09日
    浏览(48)
  • 定时器定时中断&定时器外部时钟

    1、RCC开启时钟,此时定时器的基准时钟和整个外设的工作时钟都打开 2、选择时基单元的时钟源,对于定时中断选择内部时钟源 3、配置时基单元,包括预分频器,自动重装器,计数模式等 4、配置输出中断控制允许更新中断输出到NVIC 5、配置NVIC,在NVIC中打开定时器中断的通

    2024年02月15日
    浏览(51)
  • STM-32:TIM定时中断—定时器定时中断/定时器外部时钟

    定时器可以对输入的时钟进行计数,并在达到设定值时触发中断 16位计数器、预分频器、自动重装寄存器的时基单元,在72MHz计数时钟下可以实现最大59.65s的定时 不仅具备基本的定时中断功能,而且还包含内外时钟源选择、输入捕获、输出比较、编码器接口、主从触发模式等

    2024年02月09日
    浏览(58)
  • STM32单片机(六)TIM定时器 -> 第二节:TIM定时中断练习(定时器定时中断和定时器外部时钟)

    ❤️ 专栏简介:本专栏记录了从零学习单片机的过程,其中包括51单片机和STM32单片机两部分;建议先学习51单片机,其是STM32等高级单片机的基础;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 :适用于想要从零基础开始学习入门单片机,且有一定C语言基础的的童鞋

    2024年02月09日
    浏览(41)
  • 【Qt】定时器处理——定时器事件类QTimerEvent和定时器类QTimer使用

    Qt的定时器只能通过纯代码实现,定时器顾名思义,主要作用是定时特定的时间。 Qt提供了定时器事件类 QQTimerEvent 和定时器类 QTimer 实现定时器操作。 Qt提供了更高层次的定时器编程接口** QTimer **类,可以使用信号和槽,还可以设置定时一次。比较常用的方法有: QTimer::set

    2024年02月05日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包