浏览器渲染（事件循环）运行机制及Chrome与Firefox行为差异分析

我制作了简单的演示样例，我们开始吧。
需要说明的是，以下测试均使用Chrome和Firefox两款浏览器进行对比。

Demo 1 #

block.addEventListener("click", () => {
    block.style.transform = "translateX(500px)";
    block.style.transition = "";
    block.style.transition = "transform 1s ease-in-out";
    block.style.transform = "translateX(100px)";
});

.main {
  width: 100px;
  height: 100px;
  background: orange;
}

<div id="block" class="main"></div>

测试结果：两款浏览器中都不会出现任何样式变化。

Demo 2 #

block.addEventListener("click", () => {
    block.style.transform = "translateX(500px)";
    block.style.transition = "";
    requestAnimationFrame(() => {
      block.style.transition = "transform 1s ease-in-out";
      block.style.transform = "translateX(100px)";
    });
});

.main {
  width: 100px;
  height: 100px;
  background: orange;
}

<div id="block" class="main"></div>

测试结果：Chrome中可以看到动画效果，Firefox中的表现则不同。Firefox的行为符合Jake Archibald《In the Loop》视频中的说明，Chrome的表现则不符合，看起来Firefox遵循了规范而Chrome没有。

Demo 2（变体） #

block.addEventListener("mouseover", () => {
    block.style.transform = "translateX(500px)";
    block.style.transition = "";
    requestAnimationFrame(() => {
      block.style.transition = "transform 1s ease-in-out";
      block.style.transform = "translateX(100px)";
    });
});

.main {
  width: 100px;
  height: 100px;
  background: orange;
}

<div id="block" class="main"></div>

测试结果：此时Chrome表现符合预期，而Firefox的表现和Demo 2中的Chrome一致，两款浏览器的表现刚好互换。我还测试了mouseenter、mouseout、mouseover、mouseleave、mouseup、mousedown等事件，最有意思的是最后两个事件在两款浏览器中的表现一致，且二者的表现都不符合规范。

初步结论 #

看起来这两款UA（用户代理）对事件的处理逻辑存在差异，但具体差异体现在哪里呢？

Demo 3 #

block.addEventListener("click", () => {
    block.style.transform = "translateX(500px)";
    block.style.transition = "";
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        block.style.transition = "transform 1s ease-in-out";
        block.style.transform = "translateX(100px)";
      });
    });
});

.main {
  width: 100px;
  height: 100px;
  background: orange;
}

<div id="block" class="main"></div>

测试结果：此时Firefox和Chrome的表现一致，符合Archibald的理论说明。但回到两个版本的Demo 2，为什么二者的表现会有如此大的差异呢？

内容的提问来源于stack exchange，提问作者MaximPro