CSS/jQuery 性能 - 提供更高分辨率的选择器是否更好答案

【问题标题】：CSS/jQuery performance - Is it better to provide higher resolution selectorCSS/jQuery 性能 - 提供更高分辨率的选择器是否更好
【发布时间】：2020-03-02 12:36:45
【问题描述】：

假设我正在使用 CSS 或 jQuery 选择一个 DOM 元素，提供更高的分辨率会更快吗？

也就是说，我正在尝试找出以下哪一种 jquery 选择器方法在速度方面是最好的：

Method 1. $("#name")
Method 2. $("input#name")
Method 3. $("div input#name")

或者这些 CSS 选择器：

Method 1. #name {font-weight: bold;}
Method 2. input#name {font-weight: bold;}
Method 3. div input#name {font-weight: bold;}

看起来Method 3 可能会使选择器的工作变得容易，因为它可以更快地缩小到元素？

【问题讨论】：

可能重复的问题：stackoverflow.com/questions/34100018/…
这取决于您使用的情况。由于 jQuery 是一个库，你可以忽略这部分。
@ChrisChen 您链接的问题是关于 CSS 选择器的顺序，我的问题是一种方法是否比另一种更优化。
@NitinNain，我相信性能是该问题的主要讨论点。根据 jfriend00 提供的答案，最短的 jQuery 选择器是最快的，而 vanilla js 仍然击败了它们。
啊，你是对的。抱歉，我正在查看另一个问题，该问题也显示为可能重复 - stackoverflow.com/questions/25105736/…

标签： javascript jquery html css css-selectors

【解决方案1】：

考虑这些 jQuery 语句

Method 1. $("#name")
Method 2. $("input#name")
Method 3. $("div input#name")

所有三个语句都一样好，因为id 总是需要是一个唯一的值。所以$("#name") 与$("div input#name") 相同，除非 dom 有多个具有相同 id 的字段

现在考虑 css 行，这取决于具体情况。

#name { color: red; }
input#name { color: yellow; }
div input#name { color: green; }

<div>
  <input id='name'>
</div>

【讨论】：

根据你的sn-p，选择器越精确越快。起初我以为您只是用每个新语句覆盖样式，但是如果您将 #name { color: red; } 移动到最后一个位置，它仍然会显示为绿色。如果您完全移除绿色选择器，则会显示黄色。
Faster 在这里可能没有任何实际意义，但Specificity 是更受欢迎的术语。这里颜色green 是覆盖的，因为样式更具体，因为输入在div 元素内
啊！是我缺乏英语词汇让我误解了你的答案。谢谢你的解释。

【解决方案2】：

我认为选择器越小性能越好。我隐约记得在某处读到选择器是从右到左评估的。因此，首先评估最后一个子选择器，然后在向左移动时压缩结果列表。如果您担心某个实例，您始终可以通过测量querySelctorAll() 或$() 之前和之后之间的时间来检查该特定实例的性能，方法是传递可能的选择器并亲自查看。

【讨论】：