CSS 优化：元素 ID vs. 类

Question

使用MVC和jQuery时，我更多地使用CSS。我想到的一个问题是，在使用元素ID与类的情况下，哪种方法最好。如果我使用元素ID，则jQuery中的选择器会更短。例如：

#imageTag... $('#imageTag')
#searchTag... $('#searchTag')

作为一种替代方案，它可以用一个父容器元素进行结构化。

#searchTool, #classifyTool .tag

在这种情况下，可以使用选择器如$('#searchTool .tag')或$('#classifyTool .tag')。当页面中有多个类的实例时（例如.tag），这种方法特别有用。你只需要更改父容器对象。

这只是一个简单的理论示例，不旨在代表真实样式，只是描绘概念。

所以有两个问题：

1.假设页面上有大量样式，是否会影响页面/CSS或jQuery的性能？

2.基于您的经验，第二种方法似乎更灵活和可维护。您有什么想法？

是否存在更好的替代方案？

谢谢

- ChrisP

Answer 1

• 使用ID是最快的。
• 标签名称次之。
• 没有标签名称的类名称是最慢的。

关于使用哪种选择器，应该选择最适合的。如果网页上有一个搜索框，那么使用ID会是最合适的，因为只有一个搜索框。另一方面，表格行可能会用class进行标识，因为有（或可能有）多个行。

尽量不要使用像 ".class" 这样的选择器（在CSS或jQuery中）。这样会强制jQuery或浏览器遍历整个文档树。大多数情况下，class 只适用于一种标签，因此请指定该标签（例如 "div.class"）。这一点可以使性能巨大提升（特别是对于具有大文档的jQuery）。

选择器的长度不应该成为考虑因素。应该考虑性能、可读性和可维护性。

- cletus

---

+1 - 技术上是正确的，但我更强调实际性能差异几乎完全是理论上的，实际上在现实场景中几乎永远不会有影响。 - Rex M

不属实，我主要通过消除裸类选择器（这不是唯一的因素，但是它是一个重要组成部分）将页面加载时间从大于1秒减少到小于100毫秒。 - cletus

由于几乎每个浏览器都拥有 getElementsByClassName() 方法，所以类名在大多数浏览器中不应过于缓慢。唯一失败的是IE，在这里确实是一个重要因素。此外，我应该指出，我没有查看jQuery的Sizzle选择器引擎代码，因此我不知道引擎是否使用此方法来优化性能。可以使用新的 QuerySelectorAll() 方法来加快查询速度，使jQuery选择器速度变得更不相关，但支持性更少。 - Dan Herbert

Google页面速度文档建议优先使用类和ID选择器而不是标签选择器：http://code.google.com/speed/page-speed/docs/rendering.html - travis-146

@Ayyash jQuery和CSS是不同的东西，但它们都从右到左读取选择器。请参见https://dev59.com/l2Yr5IYBdhLWcg3wb5vc - Capsule

Answer 2

我通常更喜欢使用类方法。原因是您不必为系统中的每个新ID元素编写新的CSS选择器。

此外，我倾向于区分“结构”和“样式”CSS。也就是说，我将处理大小（宽度/高度）和位置的内容与执行字体重量、颜色等操作的CSS类分开。

对于不变的结构框架部件，我会使用ID。对于在HTML中可能具有多个表示的部分，我将坚持使用类机制。

- NotMe