html - 哪种 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 合作，这意味着两件可能很重要的事情：

1) 我不能编辑任何 HTML，只能编辑 CSS

2) 页面正常加载完成后，我的所有 CSS 都会被读取。

Answer 1

好吧，第二个肯定会读得更快，因为它更小。

就“处理”而言，通过什么浏览器？除非所讨论的样式表处理数以万计的 id，否则我怀疑您会看到两者之间的任何显着差异。

Answer 2

我看不出 CSS 处理如何成为页面加载时间的瓶颈。如果您希望页面加载更快，请减小 HTML/CSS 的大小并将 CSS 粘贴到 HTML 的style标记中的head标记中。这将避免额外的 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

您可能应该在不同的浏览器中对此进行分析，因为它们可能会给您不同的结果。