jQUery Selectors vs Native API (v15)

Revision 15 of this benchmark created by mike on

Preparation HTML

<div id="testid"></div>
<div class="testclass"></div>

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

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery ID Selector
$("#testid");
ready
getElementById
document.getElementById("testid");
ready
jQuery class Selector
$(".testclass");
ready
Native querySelector
document.querySelector(".testclass");
ready
Create jQuery from Native
$(document.getElementById("testid"));
ready
Native querySelector to jQuery Object
$(document.querySelector(".testclass"));
ready
jQuery class Selector with tag
$("div.testclass");
ready
jQuery id with class selector
$("#testid.testclass");
ready
var getArrayFromTag = function(idElement, tagname) {
  //get the NodeList and transform it into an array
  return Array.prototype.slice.call(idElement.getElementsByTagName(tagname));
}

//Get the arrays
var child_inputs = getArrayFromTag(document.getElementById("testid"), 'div');
ready

Revisions

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