为什么CSS动画和转换被JavaScript阻止？

更新2:

在Chrome 31.0.1650.34 beta版中运行下面的JSFIDLE现在不会导致所描述的行为，即它不会“在JavaScript启动时冻结”。我只能假设他们已经将CSS转换放在了一个独立于JavaScript的线程上，页面的其余部分都是好消息！冻结/阻止转换仍然出现在Firefox25.0中

更新1:

@IvanCastellanos提到，在Android Chrome上，CSS转换和动画不会被阻止。这是非常有用的信息，并且部分地激发了这个问题

原始问题：

对于浏览器供应商来说，这可能是一个更大的问题，但我的看法是：直到现在，我（和其他人）的印象是，转换CSS不透明度不会真的受到任何性能问题的影响

在视频中，Paul Irish特别给人的印象是，转换不透明性不会是一个问题，“任何告诉你其他情况的人都是……错误的”

如果是这样的话，

鉴于Paul的非凡主张，为什么CSS转换会被JavaScript阻止？动画也是如此，到底发生了什么

（对于那些要么看不到我看到的东西，要么懒得看小提琴的人：我看到一个红方块在渐变过程中变为1/5左右，然后随着JavaScript的启动而冻结，然后方块跳到过渡到完全不透明的末尾，大概是因为JavaScript执行期间达到了持续时间。）

鉴于stackoverflow需要我发布一些代码，因为我正在链接到JSFIDLE，下面是相关的JavaScript和CSS：

(function () {
    "use strict";

    var isVisible = false;

    function handleClick() {

        var fadingSquare = document.querySelector(".fadingSquare"),
            i;

        if (isVisible === false) {
            fadingSquare.className = fadingSquare.className + " active";

            // Do something intensive in JavaScript for a while
            setTimeout(function () {

                for(i = 0; i < 10000; i += 1) {
                    console.log(i);
                }

            }, 200);    // Make it occur midway through the CSS transition

            isVisible = true;
        } else {
            fadingSquare.className = fadingSquare.className.replace("active", "");
            isVisible = false;
        }

    }

    document.addEventListener("click", handleClick, false);
}());

---

Javascript在浏览器的UI线程上运行

---

整个页面被Javascript阻止，而不仅仅是CSS转换。

所选答案有点过时。从今天开始，OSX safari、firefox和chrome都在Javascript的单独线程中运行CSS动画

“鉴于stackoverflow需要我发布一些代码，因为我正在链接到JSFIDLE，下面是相关的JavaScript和CSS"这在任何情况下都是一个很好的实践。然后这个策略就起作用了！这和我的想法差不多，直到我听到Paul等人说不会有任何性能问题。@Matt在转换不透明性时不会有任何性能问题。当你写垃圾JavaScript时会有性能问题。哈哈，touché。幸运的是，JavaScript不是我的而是YouTubes（这对你来说有些讽刺）。然而，上面提到的视频给人的是关于性能和CSS的错误印象。我总是使用CSS而不是JS动画，但是它有自己的gotchas.BTW console.log非常昂贵。安卓Chrome做了你期望的事情（在UI线程外运行）：有趣的是，FF 54.1的更新对我来说刚刚打破了它，JavaScript代码现在阻止了非布局转换。这根本不是真的。在循环完成之前，甚至连动画gif都不能运行-无，无，无。@Bekimbacj--恐怕你错了，已经运行CSS动画、CSS转换和Web动画API了即使主线程被阻止，不需要逐帧布局和/或其他样式计算的iMation也将继续运行。我们在中使用此选项，它在Chrome、FF、Edge中工作。@Dave，因为

left

需要布局，而布局在主线程上运行，因此被循环阻止（无论如何，您都不应该设置与布局相关的属性的动画）。尝试使用

变换

，动画不会被阻止。

.fadingSquare {
    width: 200px;
    height: 200px;
    background: #F00;
    opacity: 0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
}

.fadingSquare.active {
    opacity: 1;
}