Question

我希望这个问题不是太奇怪和随意。当我使用Firebug查看一些CSS时，我注意到每个标签的CSS属性都按字母顺序排列。

它试图告诉我们什么吗？

除了能够更快地找到属性的明显好处之外，我还想知道：如果浏览器在原始样式表中按字母顺序排列属性，是否应该更快地应用属性？

例如这是......

body {
  background: #222;
  color: #DDD;
  font-size: 0.85em;  
}

#content {
  background: #444;
  padding: 1em;
}

p {
  border-bottom: 0.9em;
  line-height: 1.2em;
  text-align: justify;
}

......比这更好......？

body {
  font-size: 0.85em;
  background: #222;
  color: #DDD;  
}

#content {
  padding: 1em;
  background: #444;
}

p {
  text-align: justify;
  line-height: 1.2em;
  border-bottom: 0.9em;
}

这可以有效测试吗？

这显然会在整个样式表中复制，因此浏览器可以按顺序执行操作，如果是这样，是否值得重新访问过去的样式表来重新排序？

- 编辑 -

好的，我的问题略有改动：如果每个标签的属性总是以相同的顺序怎么办？背景始终在边界之前总是在颜色等之前等等（我知道我错过了一些！）对于每个标签。按字母顺序可以帮助你保持秩序，而不是最佳方法。

看起来压倒性的共识是，重要的不是，不过！

Answer 1

按字母顺序排列样式绝对没有速度优势。

如果你想要真正的速度优势，你应该缩小你的CSS。

有很多程序要做，但这里有一个：CSSTidy。此程序还可以选择按字母顺序排列样式（如果您希望的好处）。

Answer 2

我不认为语句的顺序会以任何方式影响速度，但是，语句的效率会影响性能。（略微切向，我猜......）

请参阅：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Answer 3

性能优势仅适用于可视化解析 - 当您检查元素时，FireBug会将您的样式属性重新排列为字母顺序，我发现找到样式属性的速度要快得多。

Answer 4

Firebug这样做是为了让开发人员可以轻松搜索属性值，如果你想获得速度优势，请明智地编写你的css，其中主要包括避免重复和冗余以及干掉

此外，当页面加载并解析CSS并且布局呈现一次时，下次不再执行时，请保持冷静，并尝试使其更易于维护

将CSS属性按字母顺序排列是否有速度优势？

4 个答案: