logo标签列表

按字母顺序排列CSS属性是否有加速效果？

cssparsing
6
我希望这个问题不算太奇怪和随意。当我使用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;
}

这个能有效地测试吗？

显然，这将在整个样式表中复制，因此浏览器是否从按顺序执行操作中受益，如果是，是否值得重新审视过去的样式表以重新排序呢？

--编辑--

好的，稍微修改一下我的问题：如果每个标记的属性始终按相同的顺序排列。每个标记的背景始终在边框之前，颜色等等（我知道我错过了一些！）对于每个标记都是如此。按字母顺序可以帮助您保持顺序，而不是最佳方法。

看起来压倒性的共识是这并不重要！

8
我99.999999999%确定列表仅按字母顺序排序是为了方便开发人员查看。根据浏览器解析样式表的方式，可能存在最佳顺序，但我想不出为什么那个顺序应该是字母表排序。 - Pekka
即使有差异，也可能只是以纳秒为单位衡量。 - mikerobi
按字母顺序排列是任何使用字母表表示的语言的自然顺序。使用字母表对元素进行排序有助于维护和/或调试代码的开发人员。它几乎从不影响代码的运行速度。 - DwB
5个回答
3

按字母顺序排序样式表并不能提高速度。

如果您想获得真正的速度优势，您应该压缩CSS。

有很多程序可以做到这一点，但这里有一个： CSSTidy。该程序还有将样式按字母顺序排列的选项（如果您希望这样做以便于您自己）。

你是在谈论总体速度还是解析速度？解析文本是很耗费资源的，但我猜测大部分开销都是在遇到标记时产生的。缩小文件大小可以节省空间，但不会减少文档的复杂性。 - mikerobi
虽然你说得没错，大部分的开销确实是在遇到标记时发生的，但空格确实会使速度有所下降。你可以自己用正则表达式试一下。此外，下载速度也是影响页面加载时间感知的一个重要因素。 - Joseph Silber
我同意，但是除非你有一个巨大的文件，“有点”只相当于纳秒。我同意下载时间，这就是我问“总体速度”或“解析速度”的原因。 - mikerobi
我同意。你的CSS顺序是为设计师自己组织的。对我来说，我更喜欢按位置、大小、颜色等排序...这只是个人偏好。在互联网上，我没有发现任何速度差异。压缩CSS很棒...上传最终版本时可以这样做...并保留完整版本以供将来更改...(您不想以后在压缩的CSS文件中进行排序。)我还将完整版本留在服务器上，以供将来需要的其他人使用。我认为你可以认为这个问题已经得到了回答。 - sheriffderek
0

Firebug让开发者能够轻松搜索属性值，如果你想要速度上的好处，明智地编写你的CSS，主要包括避免重复和冗余以及保持DRY。

此外，当页面加载时，CSS被解析和布局渲染一次后，下一次不会再次执行，所以保持冷静，并尝试使其更易于维护。

0

按字母顺序编写CSS只有一个好处：方便查找属性，与速度无关。

为了提高速度，您可以使用缩写而不是单独使用属性。像border-color、border-width、border-style这样的属性可以在一个名为border的属性中使用。

0
0

性能优势仅适用于视觉解析 - 当您检查元素时，FireBug将重新排列样式属性以按字母顺序排列，这样我可以更快地找到样式属性。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接