jQuery selector variants

JavaScript performance comparison

Test case created by xenji

Preparation code

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

<!-- borrowed from https://github.com/twbs/bootstrap-examples/blob/master/starter-template/index.html -->
<div id="wrapper">
  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <button id="testid" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
  </div>
</div>

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
via attribute selector
$('button[data-toggle="collapse"]')
pending…
via class preselection and find
$('.container').find('button[data-toggle="collapse"]')
pending…
via class only
$('.navbar-toggle')
pending…
via attribute only
$('[data-toggle="collapse"]')
pending…
via id
$('#testid')
pending…
via native class select plus wrap
$(document.getElementsByClassName('navbar-toggle'))
pending…
native id select plus wrap
$(document.getElementById('testid'))
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment