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

Question

更新2:

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

更新1:

@IvanCastellanos提到Android Chrome上没有阻止CSS过渡和动画.这是非常有用的信息,部分推动了这个问题.

原始问题:

对于浏览器供应商来说,这可能是一个更大的问题,但现在说:到目前为止,我对这个视频(和其他人)的印象是,转换CSS不透明度不会真正遭受任何性能问题.

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

好吧,如果是这样的话,这个小提琴让我错了.

鉴于保罗的非凡主张,为什么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中，所有css动画都在与javascript不同的线程中运行。