jquery - CSS 优化 : Element 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. 第二种方法似乎更灵活且更易于维护。基于您的经验的想法。

是否有更好的替代方法？

谢谢

Answer 1

• ID 最快
• 标签名称次之最快
• 没有标签名的类名最慢

至于用哪个，用哪个最合适。如果您的页面上有一个搜索框，那么使用一个 ID 是最合适的，因为只有一个搜索框。另一方面，表行可能会按类别标识，因为存在(或可能)不止一个。

尽量不要使用像“.class”这样的选择器(在 CSS 或 jQuery 中)。您强制 jQuery 或浏览器基本上遍历整个文档树。大多数情况下，该类仅适用于一种标签，因此请指定(例如“div.class”)。仅此一项就可以产生巨大的性能差异(尤其是在带有大型文档的 jQuery 上)。

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