在WebWorkers中使用无限同步循环由于WebWorkers本质上是Web线程，您可以在其中无限循环而不会阻塞主线程。这使您可以访问微秒级时间分辨率。这对于在Worker中做出时间关键的决策特别有用，让主线程准确地知道什么时候合适。例如：渲染一些只要微秒是质数的东西。要访问微秒，您可以使用performance.now。优点微秒分辨率。UI线程的成本几乎为零。利用WebWorkers的消息传递设计，从UI线程的角度来看是完全异步的。安全终止，与setInterval不同，调用worker.terminate保证不再接收到消息。引用MDN：“Worker的Terminate()方法会立即终止Worker。它不会等待Worker完成内部程序的执行，而是立即停止。”缺点即使可以做出毫秒级的决策，但是返回消息给UI线程Delivery也是异步的。您不能像在Worker中做出决定那样及时渲染。保持线程完全被占用。手机电池可能很快就会好起来。需要WebWorker支持。当不集中注意力时，不会暂停。如果您创建具有无限动画的div，请使用CSS动画来处理时间事件（动画迭代）。您可以订阅它的animationiteration事件，并在事件animation-duration被回调时收到通知。优点自动暂停时，选项卡不在焦点上。Whenthetabisnotinfocus,theeventdoesn'tfireatall.无需担心被呼叫卡住，这些呼叫将在选项卡再次显示后立即运行。当从DOM中删除隐藏的div时，会发生自动清理。例如，如果你有一个按时呈现的React组件，你不需要在卸载时做任何事情。div将被删除，事件将不再触发。调用逻辑很优雅：.addEventListener("animationiteration",fun)。延迟启动计时器的超级干净的方法：animation-delay。缺点有点太聪明了，可能会让你的合作者感到困惑。依赖于DOM和CSSOM。其他CSS规则可能会干扰您的规则。这就是为什么我建议像这样创建一个任意的不存在的标签。也许创建一个自定义元素，里面整齐地放置CSS动画代码？如果元素有显示则无效：无；属性。使用SVG标签（SMIL动画）如果像这样调用:animate.addEventListener('repeat',fun)，你的函数将每秒被调用一次。优点即使显示SVG：无；。当SVG从DOM中移除时自动停止。直到整个页面加载完毕才开始渲染。选项卡聚焦时自动暂停。缺点有点太聪明了，可能会让你的合作者感到困惑。依赖于DOM和CSSOM。与上述相同的警告。其他CSS规则可能会干扰您的配置。不支持IE和Edge（在Chromium之前）。不准确根据我的测试，它可以延迟15ms。在整个页面加载之前它不会开始。是的，这可能是一个缺点，但它也是一个特点。使用WebAnimationsAPIWebAnimationsAPI允许您在JavaScript中为DOM元素设置动画。有趣的是，您可以为未渲染的元素设置动画！这使您可以访问纯JS（和webapi）中的计时机制。下面是setTimeout的另一种实现：document.timeline);animation.play();animation.addEventListener('finish',()=>{callback();});}很简洁，不是吗？Advantage不需要DOM交互。对于不熟悉它的人来说很容易理解。当不集中注意力时，会自动暂停。缺点仍然是一个建议。不要在生产中使用。可怕的兼容性。可能只适用于Chromium。仍然有点违反直觉。当标签不集中时暂停。如果用作setTimeout的替代品可能会很糟糕。不能使用间隔。仅适用于完成后的活动。不准确根据我的测试，误差是±5ms。
