css - 子セレクターを使用した効率的な CSS、それは価値がありますか?

Question

知っている：

div > p

よりもレンダリングが高速です

div p

ただし、その一方で、1 文字多く占有するため、CSS ファイルを送信する時間が長くなります。

速度の違いがごくわずかであることはわかっていますが、多数のセレクターを含む非常に大きな CSS ファイルがある場合、それが重要になる可能性があります。

それで、私の質問は次のとおりです。レンダリングに時間を費やして子セレクターを使用しないか、子セレクターを使用して CSS ファイルの送信にさらに時間を費やすのがよいでしょうか?

score 2 · Accepted Answer

Div > pとdiv p同じではありません

次の構造がある場合：

<div>
  <p id="p1">first p</p>
  <section>
     <p id="p2">second p</p>
  </section>
</div>

div > pは p1 のみに適用されますがdiv p、p1 と p2 の両方に適用されます。

セレクターの速度は、html 構造によって異なります。

score 1 · Accepted Answer

サーバーからのデータの読み込みと HTML+CSS の解析を区別する必要があります。

ロード時間にあなたは正しいです（遅くなります）

しかし、レンダリングでは間違っています（高速になります）

PS を忘れないでください: 一度 CSS を取得すると、再度ダウンロードされることはありません。

2 に答える 2