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

Question

假设我正在使用 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;}

方法 3 似乎可以简化选择器的工作，因为它可以更快地缩小到元素？

Answer 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>