其中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

好了，第二个肯定会阅读更快，因为它的体积更小。

至于“加工”云，通过什么浏览器？除非样式表中的问题与IDS成千上万的交易，我怀疑你会看到任何两者之间的差异显著

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

，因为他们很可能会出现不同的结果你或许应该资料这个在不同的浏览器。