Quel style CSS Selector est le plus efficace?

Question

Inspiré par Help understanding JQuery Attribute Equals Selector la question est:

Lequel est le plus efficace?

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

ou

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

Et oui, nous pourrions omettre le sélecteur de #foo initial, mais cette question demandait à ce sujet en particulier, alors ... sobeit

De plus, alors que mon La syntaxe ci-dessus utilise jQuery, c'est juste parce que c'était pratique pour moi de le laisser ainsi. La même syntaxe serait trouvée dans un document CSS, non? apparemment ce n'est pas la même chose, limitons-le à jQuery alors?

Answer 1

Un assez quick and dirty demo montre une divergence 1-5ms entre les deux approches, et est incohérent entre ce qui est le plus rapide. J'imagine que le test pourrait être bien amélioré.

Quoi qu'il en soit, plus de dix pages-charges (toutes les heures sont en millisecondes):

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 

Alors ... dans la mesure où je peux conclure quoi que ce soit de cela, il semble que $('#foo td.one[title=baz]') est légèrement plus rapide , mais, en moyenne, ils sortent à peu près la même chose.