getElementsByTagname vs querySelectorAll vs jQuery (v21)

Revision 21 of this benchmark created on

Description

Tests how quickly you can iterate through multiple elements on the page.

Preparation HTML

<input type="PASSWORD"></input><input type="PASSWORD"></input>

Setup

var hasFields = false;
    var num = 0;

Teardown


    hasFields = false;
    num = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
Using querySelectorAll()
if (document.querySelectorAll('input[type=password]').length > 0) {
  hasFields = true;
}
ready
Using querySelector()
if (document.querySelector('input[type=password]')!== null) {
  hasFields = true;
}
ready
plain for
var fields = ['no','no','yes'], num = 0;
for (var i = 0; i < fields.length; i++) {
  if (fields[i] === 'yes') num+=1;
}
ready
regex for count
var fields = ['no','no','yes'], num = 0;
for (var i = 0; i < fields.length; i++) {
  if ((/yes/i).test(fields[i])) num+=1;
}
ready
while check
var fields = ['no','no','yes'], len = fields.length, num = 0;
while (len--) {
  if (fields[len] === 'yes') num+=1;
}
ready

Revisions

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