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

Question

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

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 事件循环之外处理的，但我不确定我的假设是否正确。最近解释内部结构的文章是 - Rendering Performance .然而，它还不够深入。如果有人解释这一点或在我开始硬核并开始寻找规范之前向我指出一些易于阅读/观看的 Material ，我将不胜感激。提前致谢

Answer 1

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

alert() 调用 pause algorithm ，应该阻止当前任务并导致事件循环除了等待“满足目标条件”之外无事可做。

虽然，这个页面也有一个很大的警告段落，说明，

Pausing is highly detrimental to the user experience, especially in scenarios where a single event loop is shared among multiple documents. User agents are encouraged to experiment with alternatives to pausing, such as spinning the event loop or even simply proceeding without any kind of suspended execution at all, insofar as it is possible to do so while preserving compatibility with existing content. This specification will happily change if a less-drastic alternative is discovered to be web-compatible.

因此您的用户代理肯定会按照建议使用 spin-the-event-loop 进行试验替代方案，它允许其他任务继续运行，即使调用 alert() 的任务已暂停。