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

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

哪种CSS组织方法最快？

4 个答案: