Selecting multiple items by ID versus selecting by class

JavaScript performance comparison

Test case created by J3QQ4-H7H2V-2HCH4-M3HK8-6M8VW

Preparation code

<div id="id01" class="cg-lol"></div>
<div id="dummy1" class="none"></div>
<div id="id02" class="cg-lol"></div>
<div id="dummy2" class="none"></div>
<div id="id03" class="cg-lol"></div>
<div id="dummy3" class="none"></div>
<div id="id04" class="cg-lol"></div>
<div id="dummy4" class="none"></div>
<div id="id05" class="cg-lol"></div>
<div id="dummy5" class="none"></div>
<div id="id06" class="cg-lol"></div>
<div id="dummy6" class="none"></div>
<div id="id07" class="cg-lol"></div>
<div id="dummy7" class="none"></div>
<div id="id08" class="cg-lol"></div>
<div id="dummy8" class="none"></div>
<div id="id09" class="cg-lol"></div>
<div id="dummy9" class="none"></div>
<div id="id10" class="cg-lol"></div>
<div id="dummy10" class="none"></div>
<div id="id11" class="cg-lol"></div>
<div id="dummy11" class="none"></div>
<div id="id12" class="cg-lol"></div>
<div id="dummy12" class="none"></div>
<div id="id13" class="cg-lol"></div>
<div id="dummy13" class="none"></div>
<div id="id14" class="cg-lol"></div>
<div id="dummy14" class="none"></div>
<div id="id15" class="cg-lol"></div>
<div id="dummy15" class="none"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


      
<script>
Benchmark.prototype.setup = function() {
  var $elements = null;

};
</script>

Preparation code output

<div id="id01" class="cg-lol"></div> <div id="dummy1" class="none"></div> <div id="id02" class="cg-lol"></div> <div id="dummy2" class="none"></div> <div id="id03" class="cg-lol"></div> <div id="dummy3" class="none"></div> <div id="id04" class="cg-lol"></div> <div id="dummy4" class="none"></div> <div id="id05" class="cg-lol"></div> <div id="dummy5" class="none"></div> <div id="id06" class="cg-lol"></div> <div id="dummy6" class="none"></div> <div id="id07" class="cg-lol"></div> <div id="dummy7" class="none"></div> <div id="id08" class="cg-lol"></div> <div id="dummy8" class="none"></div> <div id="id09" class="cg-lol"></div> <div id="dummy9" class="none"></div> <div id="id10" class="cg-lol"></div> <div id="dummy10" class="none"></div> <div id="id11" class="cg-lol"></div> <div id="dummy11" class="none"></div> <div id="id12" class="cg-lol"></div> <div id="dummy12" class="none"></div> <div id="id13" class="cg-lol"></div> <div id="dummy13" class="none"></div> <div id="id14" class="cg-lol"></div> <div id="dummy14" class="none"></div> <div id="id15" class="cg-lol"></div> <div id="dummy15" class="none"></div>

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
Pure JS
$elements = document.querySelectorAll("#id01, #id07, #id15");
pending…
Multiple IDs
$elements = $("#id01, #id07, #id15");
pending…
By single ID - comparison
$elements = $("#id15");
pending…
By Class - same elements
$elements = $(".cg-lol");
pending…
Pure JS by Class
$elements = document.getElementsByClassName("cg-lol");
pending…
By Single ID - pure JS
$elements = document.getElementById("id15");
pending…
By ID, then jquerize
$elements = $(document.getElementById("id15"));
pending…
By Multiple IDs, then jquerize
var nodeArray = [];
nodeArray.push(document.getElementById("id01"));
nodeArray.push(document.getElementById("id15"));
$elements = $(nodeArray);
pending…

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

0 Comments