javascript jquery 和 CSS 中最快的选择器方法 - ID 与否？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6035348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fastest selector method in jquery and CSS - ID or not?
提问by Hakan
What is fastest in jquery/javascript?
什么是 jquery/javascript 中最快的？
$('#myID .myClass')
or
或者
$('.myClass')
What is best to use in CSS?
在 CSS 中最好使用什么？
#myID .myClass{}
or
或者
.myClass{}
I see now that I should have explained better. Sorry!
我现在明白我应该解释得更好。对不起！
Ofceauce ID is a faster selector in both CSS and JavaScript. But some times you need to use class since there are multiple selectors.
Ofceauce ID 是 CSS 和 JavaScript 中更快的选择器。但有时您需要使用类，因为有多个选择器。
Say forexample that I have i BIG html document. In the middle of the page I have:
说例如我有我的大 html 文档。在页面中间，我有：
<div id="myID">
<a class="myClass">link1</a>
<a class="myClass">link1</a>
<a class="myClass">link1</a>
</div>
If I want to target all "myClass". Would it then be better to target the ID before targeting the classes? (then I wouldn't have to do domtravel of the entire HTML document) Eg.:
如果我想针对所有“myClass”。那么在定位类之前定位 ID 会更好吗？（然后我就不必对整个 HTML 文档进行 domtravel） 例如：
Would this:
这会不会：
$('#myID').find('.myClass')
$('#myID').find('.myClass')
Be faster than:
比以下更快：
$('.myClass')
$('.myClass')
采纳答案by Anurag
My testingon modernbrowsers suggests that you should go with either,
我在现代浏览器上的测试表明你应该选择，
$('#id').find('.class') // or
$('.class')
but not,
但不是，
$('#id .class')
Reason being that all modern browsers implement getElementsByClassNameresulting in almost-constant time lookups by class name (assuming a hash implementation). Which browsers are modern is another subjective question.
原因是所有现代浏览器都实现了getElementsByClassName按类名（假设哈希实现）几乎恒定的时间查找。哪些浏览器是现代的则是另一个主观问题。
回答by Mark Kahn
They're roughly the same in most modern browsers since class-names are hashed internally. The difference is that older browsers don't have a .getElementsByClassNameor equivalent method, so .myClassis parsed internally to jQuery and EVERY element in the dom is walked and checked for the classname (or it uses XPath when possible).
它们在大多数现代浏览器中大致相同，因为类名是在内部散列的。不同之处在于较旧的浏览器没有一个.getElementsByClassName或等效的方法，因此.myClass在内部解析为 jQuery，并且遍历 dom 中的每个元素并检查类名（或者它在可能的情况下使用 XPath）。
Always try to use #myID .myClasswhen possible as it allows jQuery to jump directly to #myIDand traverse from there when necessary.
#myID .myClass在可能的情况下始终尝试使用，因为它允许 jQuery#myID在必要时直接跳转到那里并从那里遍历。
回答by matt b
Let's just think logically about this for a second, and pretend that you didn't know anything about how a browser is built internally or how it accesses the DOM, but you assume that whatever it does is logical.
让我们从逻辑上思考一下，假设您对浏览器的内部构建方式或它如何访问 DOM 一无所知，但您假设它所做的一切都是合乎逻辑的。
Therefore, doesn't it stand to reason that out of two selectors, the narrowest one would find you results faster?
因此，在两个选择器中，最窄的一个会更快地找到您的结果，这难道不是合理的吗？
You have two selectors, which translate to rough english as
你有两个选择器，它们翻译成粗略的英语为
- Any element of the class
myClassthat is a child of the element with ID ofmyID - Any element of the class
myClass
myClass作为 ID 为的元素的子类的任何元素myID- 类的任何元素
myClass
As for "What is best to use in CSS", this is completely subjective as it depends if you are intending to target allinstances of .myClassor just those that are children of #myID.
至于“什么是最好的CSS使用”，这是因为它取决于如果你正打算为目标完全主观的所有实例.myClass或只是那些儿童#myID。
回答by c-smile
Good question actually.
其实好问题。
Say you have parsed DOM of N elements of max depth of D and CSS of S number of rules. Then the task of finding styles for all elements has computational complexity of roughly O(N*D*S).
假设您已经解析了最大深度 D 的 N 个元素的 DOM 和 S 条规则的 CSS。那么为所有元素寻找样式的任务的计算复杂度大约为O(N*D*S)。
Obviously not all of CSS selectors has the same computation complexity.
显然，并非所有 CSS 选择器都具有相同的计算复杂度。
For example li.itemselector and li[class ~= "item"]require exactly the same CPU resources as they are equivalents. li[class = "item"]can be computed faster as it does not require scan of white spaces.
例如li.item选择器和li[class ~= "item"]需要完全相同的 CPU 资源，因为它们是等效的。li[class = "item"]可以更快地计算，因为它不需要扫描空白。
#1 selector here:
#1 选择器在这里：
#myID .myClass{} /* #1 */
.myClass{} /* #2 */
require more CPU resources as you need to do exactly the same amount of work as in case #2 plus you will need to scan parent/child chain (of max D elements) to find the element with "myID".
需要更多 CPU 资源，因为您需要执行与情况 #2 完全相同的工作量，此外您还需要扫描父/子链（最大 D 个元素）以找到具有“myID”的元素。
That is all about pure CSS selectors.
这就是纯 CSS 选择器的全部内容。
In jQuery & friends situation can be a bit different. Theoretically jQuery engine can use document.getElementById()to minimize the lookup set (so reduce the N number) but that will not match CSS behavior. Here is an example: http://jsfiddle.net/dnsUF/. Here jQuery reports one element with #foobut there two such elements in fact.
在 jQuery 和朋友中，情况可能有点不同。理论上 jQuery 引擎可以document.getElementById()用来最小化查找集（因此减少 N 数），但这将与 CSS 行为不匹配。这是一个示例：http: //jsfiddle.net/dnsUF/。这里 jQuery 报告了一个元素，#foo但实际上有两个这样的元素。
Resume:
恢复：
- In CSS case #2 is faster
- In jQuery case #1 can be faster (but technically may not be correct in CSS sense).
- 在 CSS 案例#2 中更快
- 在 jQuery 情况下，#1 可以更快（但技术上在 CSS 意义上可能不正确）。
Here is my article about CSS selector complexity: http://www.terrainformatica.com/2008/07/csss-and-computational-complexity-of-selectors/And this one of how to improve it by using style sets: http://www.terrainformatica.com/2010/09/style-sets-in-h-smile-core/
这是我关于 CSS 选择器复杂性的文章：http: //www.terrainformatica.com/2008/07/csss-and-computational-complexity-of-selectors/这是如何通过使用样式集改进它的一种： http： //www.terrainformatica.com/2010/09/style-sets-in-h-smile-core/
回答by bjornd
Yeah, id is one of the fastest method to access element. Check it out this test http://mootools.net/slickspeed/.
是的，id 是访问元素的最快方法之一。看看这个测试http://mootools.net/slickspeed/。
回答by BinomialD
#myID .myClassis definitely a better way to access the element assuming you have many elements to which the .myClassis applied.
#myID .myClass假设您有许多应用了 的元素，这绝对是访问元素的更好方法.myClass。
回答by rjb
IDs will always be the fastest way to access an element, since they are unique.
ID 永远是访问元素的最快方式，因为它们是唯一的。
回答by mrbarletta
Update - 2015 - Check yourself here
https://jsperf.com/id-vs-class-vs-tag-selectors/2
更新 - 2015 - 在这里检查自己
https://jsperf.com/id-vs-class-vs-tag-selectors/2
TL;DR;
TL; 博士;
Using ID $("#foo") is almost 4x faster than CSS $(".bar") on my chrome 41 on linux 64bits
在 linux 64 位的 chrome 41 上使用 ID $("#foo") 几乎比 CSS $(".bar") 快 4 倍
