为什么阻塞事件循环不会阻塞css动画？

Question

我不知道网页渲染生命周期 - 所以在下面的例子中我有两颗心 - 一颗由 js 动画，另一颗由 CSS 动画。当我用alert消息阻止事件循环时，CSS 心脏保持动画状态。

let scale = true;
setInterval(() => {
  $('.animate-js').css('transform', `scale(${scale ? 1.4 : 1})`);
  scale = !scale;
}, 1000)

body {
  text-align: center;
}

.heart {
  white-space: nowrap;
  display: inline-block;
  font-size: 150px;
  color: #e00;
  transform-origin: center;
}

.animate-css {
  animation: beat 2s steps(2, end) infinite;
}


/* Heart beat animation */

@keyframes beat {
  to {
    transform: scale(1.4);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heart">I
  <div class="animate-css heart">&#x2665;</div> CSS</div>
<div class="heart">I
  <div class="animate-js heart">&#x2665;</div> JS</div>
<br/>
<button onClick="alert('hurray!')">
I love it too
</button>

我很确定这是因为 CSS 动画是在 javascript 事件循环之外处理的，但我不确定我的假设是否正确。解释内部结构的最接近的文章是这个 -渲染性能。然而，它还不够深入。如果有人对此进行解释或向我指出一些易于理解的材料，以便在我变得铁杆并开始寻找规格之前阅读/观看，我将不胜感激。提前致谢

Answer 1

这是因为规范鼓励实施者不遵循规范......

alert()调用暂停算法，该算法应该阻止当前任务并导致事件循环除了等待“满足条件目标”之外不再有任何事情可做。

不过，该页面还有一个很大的警告段落，指出，

暂停对用户体验非常不利，尤其是在多个文档之间共享单个事件循环的情况下。鼓励用户代理尝试使用暂停的替代方案，例如旋转事件循环，甚至根本不进行任何类型的暂停执行，只要可以这样做，同时保持与现有内容的兼容性。如果发现一个不太激烈的替代方案与网络兼容，那么这个规范将很乐意改变。

因此，您的用户代理当然遵循了建议，尝试使用旋转事件循环alert()替代方案，即使调用的任务已暂停，该方案仍允许其他任务继续运行。