16

更新 2:

以下の JSFiddle を Chrome 31.0.1650.34 ベータ版で実行しても、説明されている動作は発生しません。つまり、「JavaScript が起動してもフリーズ」しません。CSS トランジションを JavaScript やページの残りの部分とは別のスレッドに配置したとしか思えませんが、朗報です! フリーズ/ブロックされたトランジションは、Firefox 25.0 でも表示されます。

更新 1:

@IvanCastellanos は、CSS トランジションとアニメーションがAndroid Chrome でブロックされていないと述べました。これは非常に有用な情報であり、この質問の動機の一部です。

元の質問:

これはブラウザー ベンダーにとってより大きな問題かもしれませんが、次のようになります。これまで、このビデオ(およびその他のビデオ) から、CSS の不透明度を移行してもパフォーマンスの問題は実際には問題にならないという印象を受けていました。

ビデオの中で、ポール・アイリッシュは具体的に、不透明度の移行は問題ではなく、「そうでないと言う人は...間違っている」という印象を具体的に与えています.

もしそうなら、このフィドルは私を誤解させます。

ポールの異常な主張を考えると、なぜ CSS トランジションが JavaScript によってブロックされているのでしょうか? これはアニメーションにも当てはまりますが、何が起こっているのでしょうか?

(私が見ているものが見えないか、フィドルを見るのが面倒な人のために: 赤い四角形がフェードイン遷移の約 1/5 を通過し、JavaScript が開始されるとフリーズするのが見えます。おそらく、JavaScript の実行中に期間に達したため、正方形は完全な不透明への遷移の最後にジャンプします。)

jsfiddle にリンクしているため、stackoverflow が必要な場合はコードを投稿します。関連する 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;
}
4

2 に答える 2

9

JavascriptはブラウザのUIスレッドで実行されます。

ページ全体がJavascriptによってブロックされています。CSSの移行だけではありません。

于 2013-03-12T17:35:00.460 に答える