getElementById (for unknown number of items with classname) vs. querySelector (with classname)

JavaScript performance comparison

Revision 138 of this test case created by tester

Preparation code

<p id="i1">Item 1</p>
<p id="i2">Item 2</p>
<p id="i50" class="remove_this_class">Cloned and deleted items 47 times. This is Item 3</p>
      
<script>
Benchmark.prototype.setup = function() {
  var id = 1;
  var maxIds = 260;

};
</script>

Preparation code output

<p id="i1">Item 1</p> <p id="i2">Item 2</p> <p id="i50" class="remove_this_class">Cloned and deleted items 47 times. This is Item 3</p>

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
getElementById ## max number of possible ids
while( id <= maxIds )
{
  var item = document.getElementById('i' + id);
  if( item && item.className.indexOf('remove_this_class') > -1 )
    item.className = '';
  id += 1;
}
pending…
querySelectorAll by className
var items = document.querySelectorAll(".remove_this_class");
var max = items.length;
for( var i = 0; i < max; i++ )
{
  var item = items[i];
  if( item.className.indexOf('remove_this_class') > -1 )
    item.className = '';
}
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

Item 1

Item 2

Cloned and deleted items 47 times. This is Item 3