querySelectorAll with conditions (v2)

Revision 2 of this benchmark created by Andrew Petersen on

Description

getElementsByClassName || getElementsById || getElementsByTagName || querySelectorAll

why?

Preparation HTML

<div id="test" class="test"></div>
<script>
  function query(_) {
   var r;
  
   if (r = /^\.([\w-]+)$/.exec(_)) {
    return document.getElementsByClassName(r[1])
   }
  
   else if (r = /^\#([\w-]+)$/.exec(_)) {
    return document.getElementById(r[1])
   }
  
   else if (/^[\w-]+$/.test(_)) {
    return document.getElementsByTagName(_)
   }
  
   else {
    return document.querySelectorAll(_)
   }
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
complex query
query('.test');
query('#test');
query('div');
query('div#test.test');
ready
complex querySelectorAll
document.querySelectorAll('.test');
document.querySelectorAll('#test');
document.querySelectorAll('div');
document.querySelectorAll('div#test.test');
ready
complex querySelectorAll, one line
document.querySelectorAll('.test, #test, div, div#test.test');
ready
query(class)
query('.test');
ready
querySelectorAll(class)
document.querySelectorAll('.test');
ready
query(id)
query('#id');
ready
querySelectorAll(id)
document.querySelectorAll('#test');
ready
query(tag)
query('div');
ready
querySelectorAll(tag)
document.querySelectorAll('div');
ready
querySelector(id)
document.querySelector('#test');
ready

Revisions

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

  • Revision 1: published by deepsweet on
  • Revision 2: published by Andrew Petersen on
  • Revision 3: published by Mislav on