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

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

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

优点

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

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

缺点

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

使用CSS动画处理时间事件（animationiteration）

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

优点

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

缺点

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

使用SVG 标签（SMIL动画）

代码语言：javascript复制

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

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

优点

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

缺点

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

使用 Web Animations API

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

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

这是替代 setTimeout 的实现：

代码语言：javascript复制

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

网站 css svg 渲染

0 人点赞