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

嗯，2nd 肯定会阅读更快，因为它更小。

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