views:

37

answers:

1

Inspired by http://stackoverflow.com/questions/3814966/help-understanding-jquery-attribute-equals-selector the question is:

Which of these is more efficient?

$('#FOO element.BAR[attr=BAZ]')

or

$('#FOO 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: 

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.

David Thomas