0

transitions1 つのセレクターで DOM のツリーを長く選択していると、ラグが発生することに気付きました。

お気に入り：

#wrapper #content #box-container #boxer .box:hover .transition { 
    /* styles here */
}

それ以外の場合、次のようなセレクターを使用する場合:

.box:hover .transition {
    /* styles here */
}

それは正常に動作し、遅れることはありません。これは本当ですか、それともドキュメントの設定に問題がありますか?

4

2 に答える 2

2

ID はページに 1 回だけ存在する必要があるため、これで十分です。

#boxer .box:hover .transition { 
    /* styles here */
}
于 2013-02-15T13:12:20.803 に答える
1

トランジション、アニメーション、テキスト シャドウなどを含む CSS3 エフェクトはブラウザーに基づいており、GPU のパフォーマンスが最適でない場合にアニメーションを遅延させる GPU にアニメーションを残すものもあります。ブラウザが GPU を使用しない場合、CPU に任せます。これは最悪の状態になります。したがって、遅れている場合は、DOM ではなく GPU または CPU である可能性が高く、ネストされたクラス ルールが多すぎる場合は明らかです。ブラウザが解析するのが面倒になり、パフォーマンスが低下するため、CSS でネストされたルールが多すぎないようにしてください。

Chrome は Firefox よりもこれらの処理に優れています

私が作成したプロジェクトの 1 つで大量のアニメーションを使用している場合は、Firefox と Chrome を使用して開いて違いを確認してください。

于 2013-02-15T13:01:47.717 に答える