专栏首页code秘密花园浏览器中实现JavaScript计时器的4种创新方式

浏览器中实现JavaScript计时器的4种创新方式

在 Web Worker中使用无限同步循环

由于 Web Worker 本质上是Web线程,因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker 中做出时间关键的决策是特别实用的,可以让主线程准确的知道什么时候合适。例如:只要微秒是质数,就渲染某些东西。要访问微秒,你可以使用 performance.now

优点

  • 微秒级分辨率。
  • UI线程的成本几乎为零。
  • 利用 Web Workers 的消息传递设计,从UI线程角度完全异步。
  • 安全结束,与 setInterval 不同,调用 worker.terminate 保证不会再收到任何消息。

引用MDN:“ WorkerTerminate() 方法立即终止 Worker。它不会为等待 Worker 完成里面执行的程序,而是会立即停止。”

缺点

  • 即使你可以做出毫秒级的决策,但返回UI线程的消息传递也是异步的。你无法像在 Worker 中做出决定那样及时渲染。
  • 保持线程完全被占用。手机电池可能会好点很快。
  • 需要 Web Worker 支持。
  • 选项卡未聚焦时不会暂停。

使用CSS动画处理时间事件(animationiteration)

如果创建带有无限动画的 div。你可以订阅其 animationiteration 事件,并在事件 animation-duration 回调时得到通知。

优点

  • 自动暂停时,标签不在焦点。当标签不在焦点上时,事件根本不会触发。无需担心调用时卡住,这些调用将在再次显示选项卡时立即运行。
  • DOM 中删除隐藏的 div 时,将自动进行清理。例如,如果你有一个可渲染时间的 React 组件,则无需在卸载时做任何事情。该 div 将被删除,该事件将不再触发。
  • 调用逻辑很优雅:.addEventListener("animationiteration", fun)
  • 超级干净的方法来延迟启动计时器:animation-delay

缺点

  • 有点太聪明了,可能会使你的协作者感到困惑。
  • 取决于 DOMCSSOM 。其他CSS规则可能会干扰你的规则。这就是为什么我建议创建一个像这样的任意不存在的标记的原因 <just-a-timer-element></<just-a-timer-element>。也许用CSS动画代码整齐地放入其中创建自定义元素?。
  • 如果元素具有 display: none; 属性,则无效。

使用SVG 标签(SMIL动画)

<svg>
  <rect>
    <animate
      attributeName="rx"
      values="0;1"
      dur="1s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

如果这样调用:animate.addEventListener('repeat', fun),你的函数将每秒被调用一次。

优点

  • 即使 SVGdisplay: none;也会生效。
  • DOM 中删除 SVG 时自动停止。
  • 直到整页加载才开始渲染。
  • 选项卡聚焦时自动暂停。

缺点

  • 有点太聪明了,可能会使你的协作者感到困惑。
  • 取决于 DOMCSSOM 。与上述相同的警告。其他CSS规则可能会干扰你的配置。
  • IEEdge (在 Chromium 之前)不受支持。
  • 不准确 根据我的测试,它可能会延迟15ms。
  • 直到整页加载才开始。是的,可能是一个缺点,但是也是一个功能。

使用 Web Animations API

Web Animations API 允许你在 JavaScript 中为 DOM 元素设置动画。

有趣的是,你可以使未渲染完的元素具有动画效果!这使你能够访问纯 JS (和 Web api )中的定时机制。

这是替代 setTimeout 的实现:

function ownSetTimeout(callback, duration) {
  const div = document.createElement('div');

  const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 });

  const animation = new Animation(
    keyframes,
    document.timeline
  );

  animation.play();

  animation.addEventListener('finish', () => {
    callback();
  });
}

很整洁,不是吗?

优点

  • 不需要DOM交互。
  • 不熟悉的人容易理解。
  • 标签未聚焦时自动暂停。

缺点

  • 仍然是一个建议。不要在生产中使用。
  • 可怕的兼容性。可能仅适用于 Chromium
  • 还是有点违反直觉的。
  • 标签未聚焦时暂停。如果用作 setTimeout 的替代品可能会很糟糕。
  • 不能间隔使用。仅 onfinish 活动可用。
  • 不准确 根据我的测试,误差 ±5ms
  • 英文原文:https://blog.omaralshaker.com/creative-ways-to-javascript-timing/
  • 授权译者:ConardLi

本文分享自微信公众号 - code秘密花园(code_mmhy),作者:ConardLi

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript中的类型判断

    类型判断在 web 开发中有非常广泛的应用,简单的有判断数字还是字符串,进阶一点的有判断数组还是对象,再进阶一点的有判断日期、正则、错误类型,再再进阶一点还有比...

    ConardLi
  • 「框架篇」React 中 的 9 种优化技术

    谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文...

    ConardLi
  • 【React深入】深入分析虚拟DOM的渲染过程和特性

    React的虚拟 DOM和 Diff算法是 React的非常重要的核心特性,这部分源码也非常复杂,理解这部分知识的原理对更深入的掌握 React是非常必要的。

    ConardLi
  • 【leetcode】Palindrome Number

    Determine whether an integer is a palindrome. Do this without extra space.

    阳光岛主
  • 南昌大学航天杯第二届程序设计竞赛校赛网络同步赛 ID and password

    用户2965768
  • Google 是如何做 Code Review 的

    Google 的代码审查在工程实践中起着重要作用,并且 Google 早期就已经开始采用。直到今天,代码审查仍用于保证代码库的整洁,一致,并确保没有人随意提交代...

    GitHubDaily
  • 为刺激美国就业,谷歌掷千万美金成立奖学金

    内容概要:7月13日,Google 在官方博客中宣布启动了一项促进美国本土就业的计划,Google 将基于 Grow With Google 计划,提供 10 ...

    HyperAI超神经
  • 浅谈Google回归

    用户1127987
  • 自定义View(三)-动画-属性动画ValueAnimator

    之前我们把视图动画(也就是View动画)分析的差不多了,当然帧动画我们没有讲解,其实帧动画比较简单,就是通过顺序播放一系列的图像从而产生动画效果,可以简单理解为...

    g小志
  • 社会工程学攻击名词解释

         社会工程学(Social Engineering),一种通过对受害者心理弱点、本能反应、好奇心、信任、贪婪等心理陷阱进行诸如欺骗、伤害等危害手段,取得...

    周俊辉

扫码关注云+社区

领取腾讯云代金券