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

Question

更新2：

在Chrome 31.0.1650.34测试版中运行下面的JSFiddle，现在不会导致所描述的行为，即它不会“随着JavaScript的开始而冻结”。我只能假设他们已经将CSS转换放在一个与JavaScript不同的线程上，而其余的页面好消息！冻结/阻止转换仍然出现在Firefox 25.0中。

更新1：

@IvanCastellanos提到在Android Chrome上阻止了CSS过渡和动画不。这是非常有用的信息，部分激发了这个问题。

原始问题：

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

在视频中，保罗爱尔兰特别给人的印象是过渡不透明不会成为一个问题，“任何告诉你的人都只是......错了”。

嗯，如果是这种情况， this fiddle makes me wrong 。

为什么CSS转换被JavaScript阻止，考虑到保罗的非凡主张？这也是动画的情况，发生了什么？

（对于那些你要么看不到我看到的东西，要么懒得去看小提琴的人：我看到一个红色的方块使它大约是淡入过渡的1/5然后冻结为JavaScript踢开，然后方块跳转到完全不透明的过渡结束，大概是因为在JavaScript执行期间已达到持续时间。）

鉴于stackoverflow要求我发布一些代码，因为我链接到jsfiddle，这里是相关的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);
}());

和CSS：

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

.fadingSquare.active {
    opacity: 1;
}

Answer 1

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

整个页面被Javascript阻止;不只是CSS过渡。

Answer 2

所选答案有点过时了。截至今天，OSX Safari，firefox和chrome都在javascript的独立线程中运行css动画。