哪种 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 的 head 标记中的 style 标记中。这将避免额外的 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

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