【发布时间】：2013-02-28 08:54:12
【问题描述】：
更新 2：
在 Chrome 31.0.1650.34 beta 中运行下面的 JSFiddle 现在不会导致所描述的行为，即它不会“在 JavaScript 启动时冻结”。我只能假设他们已经将 CSS 转换放置在与 JavaScript 和页面的其余部分不同的线程上——好消息！ Firefox 25.0 中仍然会出现冻结/阻塞转换。
更新 1：
@IvanCastellanos 提到 CSS 过渡和动画在 Android Chrome 上没有被阻止。这是非常有用的信息，也是这个问题的部分动机。
原问题：
对于浏览器供应商来说，这可能更像是一个问题，但这里是：直到现在我从this video（和其他人）那里得到的印象是，过渡 CSS 不透明度不会真正受到任何的影响em> 性能问题。
在视频中，Paul Irish 特别给出了过渡不透明度不会成为问题的印象，并且“任何告诉你其他情况的人都是......错误的”。
好吧，如果是这样的话，this fiddle makes me wrong。
鉴于 Paul 的非凡主张，为什么 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;
}
【问题讨论】：
-
“鉴于 stackoverflow 需要我发布一些代码，因为我要链接到 jsfiddle，所以这里是相关的 JavaScript 和 CSS” 无论如何这是一个好习惯。跨度>
-
那么政策有效！
标签： javascript performance css