Which CSS Selector style is more efficient?
Inspired by Help understanding JQuery Attribute Equals Selector the question is:
Which of these is more efficient?
$('#FOO element.BAR[attr=BAZ]')
or
$('#FO开发者_JAVA百科O element[attr=BAZ].BAR')
And yes, we could omit the initial #FOO selector, but that question was asking about that in particular, so ... sobeit
Also, while my syntax above uses jQuery, that's just because it was convenient for me to leave it so. The same syntax would be found in a CSS document, no? apparently that isn't the same, let's limit it to jQuery then?
A fairly quick and dirty demo shows a 1-5ms discrepancy between the two approaches, and is inconsistent between which is the faster. I imagine that the test could be much improved though.
Anyway, over ten page-loads (all times are in milliseconds):
page load | $('#foo td.one[title=baz]') | $('#foo td[title=baz].one')
--------------+---------------------------------------+---------------------------------------
1 | 9 | 8
2 | 7 | 6
3 | 8 | 8
4 | 8 | 8
5 | 8 | 7
6 | 8 | 8
7 | 7 | 11
8 | 8 | 7
9 | 7 | 7
10 | 8 | 8
--------------+---------------------------------------+----------------------------------------
total | 78 | 78
So...insofar as I can conclude anything from that, it appears that $('#foo td.one[title=baz]')
is marginally faster, but, on average they come out about the same.
精彩评论