0

重複の可能性:
CSS のユニバーサル セレクターのパフォーマンスへの影響は?

* CSS セレクターの使用は、処理に時間がかかるため理想的ではないことを読みました。しかし、これは実際にどの程度の問題なのでしょうか? CSS に次のものがある場合、ページが表示されるまでにどれくらいの時間がかかりますか? 

#div1 *,
#div2 * {
float: none !important;
width: auto !important;
height: auto !important;
text-align: left;
position: static !important; 
}

接続速度と画像などの大きなアセットの数が、はるかに大きな違いを生むように思えます. 私が行っている作業はモバイルの最適化ですが、ページサイズ (さまざまなライブラリによる) は約 750KB であり、これについて私ができることは何もありません。

補足として、 !important を使用することも理想的ではありませんが、継承された厄介なコードは、この場合に必要であることを意味します。

4

1 に答える 1

3

この記事を読んでください。

CSS セレクターを最適化するための鍵は、キー セレクターとも呼ばれる一番右のセレクターに注目することです (偶然?)。A.class0007 * {} という、より高価なセレクターを次に示します。このセレクターは単純に見えるかもしれませんが、ブラウザーが一致させるにはコストがかかります。

ブラウザは右から左に移動するため、キー セレクター「*」に一致するすべての要素をチェックすることから始めます。これは、ブラウザーがこのセレクターをページ内のすべての要素と一致させようとする必要があることを意味します。

于 2012-12-04T15:21:53.947 に答える