1

次の 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 が読み込まれます。

4

4 に答える 4

3

まあ、2番目は小さいので確かに速く読まれます。

「処理」に関する限り、どのブラウザで？問題のスタイル シートが何万もの ID を扱っていない限り、この 2 つに大きな違いがあるとは思えません。

于 2009-11-21T07:31:53.000 に答える
3

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

于 2009-11-21T07:32:51.783 に答える
2

なぜだめですか：

.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>
于 2009-11-21T07:35:52.727 に答える
0

異なる結果が得られる可能性が高いため、異なるブラウザーでこれをプロファイリングする必要があります。

于 2009-11-21T07:29:53.833 に答える