どの CSS 構成方法が最も速いですか?

Question

次の HTML があるとします。

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<p id="p4">Paragraph 4</p>

ページの読み込み時間を最速にするには、CSS をどのように編成すればよいですか?

次のように HTML 要素ごとに整理できます。

#p1 { font-size:12px; color:red; }
#p2 { font-size:12px; color:blue; }
#p3 { font-size:11px; color:red; }
#p4 { font-size=11px; color:blue; }

または、次のように CSS スタイルで指定します。

#p1, #p2 { font-size: 12px; }
#p3, #p4 { font-size: 11px; }
#p1, #p3 { color:red; }
#p2, #p4 { color:blue; }

どちらか一方の場合、どちらの方が読み取りと処理が速くなりますか?

編集： 言っておくべきでしたが、私は現在 GreaseMonkey を使用しています。これは 2 つの重要な可能性があることを意味します。

1) HTML は編集できず、CSS のみ編集できます

2) ページの読み込みが正常に完了した後、CSS がすべて読み取られます。

Answer 1

さて、第二は確かに速く、それは小さいですので、の をお読みになります。

限り何のブラウザで、行く「処理済み」として？十IDSの何千ものと質問価格ではスタイルシートがない限り、私はあなたが2間の任意の有意な差を参照してくださいね疑うます。

Answer 2

私は、CSSの処理は、ページの読み込み時間のボトルネックになりますどのように表示されません。あなたはページがより速くロードしたい場合は、HTML / CSSのサイズを小さくし、HTMLのstyleタグでheadタグにCSSを貼り付けます。これは私が推測している余分なGET要求は、遅いロード時間の実際のソースで回避されます。

Answer 3

なぜ：

.red {color: red}
.blue {color: blue}
.small {font-size: 11}
.big {font-size: 12}

そして：

<p id="p1" class="big red">Paragraph 1</p>
<p id="p2" class="big blue">Paragraph 2</p>
<p id="p3" class="small red">Paragraph 3</p>
<p id="p4" class="small blue">Paragraph 4</p>

Answer 4

彼らはあなたに異なる結果を与える可能性があるとして、あなたはおそらく別のブラウザでこれをプロファイリングする必要があります。