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事件循环之外进行处理的事实，但是我不确定我的假设是否正确。最近的解释内部原理的文章是Rendering Performance。但是，它还不够深入。如果有人向我解释这一点或为我指出一些易于消化的材料，然后再开始进行规范研究，我将不胜感激。预先感谢

Answer 1

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

alert()调用pause algorithm，它应该阻塞当前任务，并导致事件循环除了等待“条件 goal”之外无所事事被满足”。

尽管如此，该页面上也有一个警告段落，

Pausing对用户体验非常不利，尤其是在多个文档中共享一个event loop的情况下。鼓励用户代理尝试使用pausing的替代方案，例如spinning the event loop，甚至在不影响任何现有执行的情况下，甚至可以在不影响现有内容兼容性的情况下继续进行试验。如果发现不太苛刻的替代方法与Web兼容，则本规范将很高兴地更改。

因此，您的UA肯定会遵循建议，尝试使用spin-the-event-loop替代方案，即使名为alert()的任务已暂停，该替代方案也可以继续运行。

Answer 2

是的，根据我的阅读，CSS动画似乎不在Javascript事件循环之外。但是，当它们同时运行时，您可以使用Javascript调用来控制动画。

以下是阅读材料的集合：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations

尤其是animation-play-state是我认为您追求的财产。我将在调用Javascript警报之前将其设置为System.out.println("Your encrypted text was: "); for (int i = 0; i < encryptedTextArray.size(); i++) { encryptedString += encryptedTextArray.get(i); } System.out.println(encryptedString); // output your result。用户单击警报中的相应按钮后，将属性设置回paused以恢复动画。

为什么阻止事件循环不阻止CSS动画？

2 个答案: