1

最近我遇到了一个使用很长的 CSS 类名的移动 UI 工具包，似乎没有使用多个类名和 CSS 继承（例如".container-element-subelement"）。这样做有很大的性能提升吗？因为以后必须维护这些样式表听起来像是一场噩梦。

4

2 回答 2

1

您提到的性能提升应该可以忽略不计（当然，取决于用户的硬件、页面大小和浏览器）。

这里有一些讨论：CSS子选择器性能与类膨胀

于 2013-01-25T17:12:50.057 回答
1

那么答案是肯定的，它会影响性能。

如果您使用 .css 框架只是为了一个小选项（例如加载所有 jquery-ui，只是为了在单个 div 上制作圆角，... non-sence.

另外，更深入地比较一下： .this-verry-long-way-too-long-css-selector-to-do-something {} 和 .thisselector {}

  • 45个字符差异=许多字节差异，
  • 乘以过长选择器名称的数量，
  • 乘以服务器发送 .css 文件的次数 = 带宽

您可以使用该工具：yslow 'firefox plugin' 来帮助您学习和 tweek .css 性能

编辑：好的，我理解你的问题。然后，这是一个与 DOM 引擎相关的好问题。

所以，我认为如果堆叠基本的简单选择器，DOM 引擎会表现得更好。

您可以使用 Chrome 开发人员工具的 Selector Profiler（在“配置文件”面板中）来分析浏览器处理页面中的选择器所需的时间（匹配 + 将样式应用于匹配元素。）

这里有一个文档：http: //moduscreate.com/efficient-dom-and-css/

继续

于 2013-01-25T17:25:30.330 回答