jquery - CSS优化:元素ID与类

使用MVC和jQuery，我可以大大利用CSS。想到的一个问题是，使用元素ID与类的最佳方法是什么。如果我使用元素ID，则jQuery中的选择器会更短。例如:

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

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

#searchTool, #classifyTool .tag

在这种情况下，选择器如

$('＃searchTool .tag')或$('＃classifyTool .tag')

可用于。当整个页面中有一个类的多个实例(例如.tag)时，此方法特别有用。您只需更改父容器对象。

这只是一个简单的理论示例，并不打算代表真实的样式，而只是描绘了这个概念。

所以有两个问题:

如果页面上有大量样式，对页面/ CSS或jQuery的性能是否有影响？

第二种方法似乎更加灵活和可维护。根据您的经验进行思考。

有更好的替代方法吗？

谢谢

最佳答案

ID是最快的

标签名称是第二快的

没有标签名的类名是最慢的

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

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

选择器的长度不应该考虑。性能，可读性和可维护性都应如此。

关于jquery - CSS优化:元素ID与类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1230636/