Optimized JS selectors

JavaScript performance comparison

Test case created by Nicolas Carlo

Preparation code

<article id="main-article">
  <ol role="navigation" class="nav nav--block pagination">
    <li class="pagination__prev">
      <a href="/page1">&lt; Previous</a>
    </li>
    <li class="pagination__next">
      <a href="/page3">Next &gt;</a>
    </li>
  </ol>
</article>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
    

Preparation code output

<article id="main-article"> <ol role="navigation" class="nav nav--block pagination"> <li class="pagination__prev"> <a href="/page1">&lt; Previous</a> </li> <li class="pagination__next"> <a href="/page3">Next &gt;</a> </li> </ol> </article>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Basic selector
$('#main-article .nav--block .pagination__prev');
pending…
Very specific selector
$('#main-article ol.nav--block li.pagination__prev');
pending…
Specific selector
$('#main-article .nav--block li.pagination__prev');
pending…
ID isolated selector
$('#main-article').find('.nav--block .pagination__prev');
pending…
ID isolated + specific selector
$('#main-article').find('.nav--block li.pagination__prev');
pending…
ID isolated + simpler selector
$('#main-article').find('.pagination__prev');
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.

0 Comments