Specific left or right

JavaScript performance comparison

Test case created by T.J. Crowder

Info

Tests the assertion here that you should be specific on the right, rather than left, of a descendant selector.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  // Build up a large DOM tree with our target buried in the middle
  var n, d, found;
  for (n = 1000; n > 0; --n) {
   d = $("<div><table><tbody><tr><td>Foo</td></tr></tbody></table>").hide();
   if (n === 500) {
    d.addClass('data').find('td').addClass('gonzales');
   }
   else if (n % 100 == 0) {
    d.addClass('data');
   }
   else if (n % 80 == 0) {
    d.find('td').addClass('gonzales');
   }
   d.appendTo(document.body);
  }
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
left specific
found = $("div.data .gonzales");
pending…
right specific
found = $(".data td.gonzales");
pending…
both specific
found = $("div.data td.gonzales");
pending…
neither specific
found = $(".data .gonzales");
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment