-1

Web ブラウザーは CSS ルールの実行を合体させて効率的に実行しますか?

複数の CSS ルールがカスケードされていることはわかっています。

カスケードされたルールのパフォーマンスへの影響のみに興味があります。

たとえば、次の場合:

button,
input,
select {
  display:block;
}

select {
  margin:1rem;
}

display:block;との両方が smargin:1rem;に適用されることはわかっていselectます。

ブラウザーが内部の css セレクター チェックを最適化するかどうかはわかりません。上記の例では、最適ではありませんが、ブラウザーは以下をチェックできます。

  1. ボタン、オプション、または選択の場合、display:block;
  2. 選択した場合、margin:1rem;

これらのチェックを実行する最適な方法は次のとおりです。

  1. ボタンまたはオプションの場合、display:block;
  2. 選択した場合、display:block; マージン:1レム;

最新のブラウザーのほとんどは、selectセレクターの 2 つのルールの実行を結合して、2 番目のチェック セット (最適なもの) を実行するほどスマートですか?

もしそうなら、どのブラウザーとそのバージョンが css ルールの合体を実行しますか?

これに関するドキュメントへのリンク、またはブラウザー機能リスト サイトの情報へのリンクも歓迎します。

CSS を最小限に抑え (宣言の重複を避けるためにセレクター部分を複製することもある)、CSS をより保守しやすくしたいので、これに興味があります。ただし、クライアントのブラウザーが冗長な css セレクターを実行するサイクルを無駄にしないようにしたいと考えています。

ありがとう。

4

2 に答える 2

0 
select {
  display:block;
}

select {
  margin:1rem;
}

順番に読み取られ、オーバーライドがないため、最終的には次のようになります

select {
  display:block;
  margin:1rem;
}

最終的な表現で。ブラウザには、すべての CSS によって順番にオーバーライドされる独自のデフォルト CSS があり、CSS 内ではプロパティも順番にオーバーライドされます。上書きがない場合、最終的な CSS は、すべての CSS にわたるすべてのプロパティの単なる照合になります。つまり、カスケーディングスタイル シートです。

また、HTML ページ内のタグの配置もカスケードに影響します。CSS リンクの後にある場合は、CSS ファイルが読み取られた後に適用され、その逆も同様です。

于 2013-06-14T00:31:33.063 に答える