getElementsByTagname vs querySelectorAll vs jQuery (v22)

Revision 22 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
type for
var fields = document.getElementsByTagName('input'), num = 0;
for (var i = 0; i < fields.length; i++) {
  if (fields[i].type === 'password') num+=1;
}
ready
type for regex
var fields = document.getElementsByTagName('input'), num = 0;
for (var i = 0; i < fields.length; i++) {
  if ((/password/i).test(fields[i].type)) num+=1;
}
ready
name + type for regex
var fields = document.getElementsByTagName('input'), num = 0;
for (var i = 0; i < fields.length; i++) {
    if ((/password/i).test(fields[i].type + ' ' + fields[i].name)) num += 1;
}
ready

Revisions

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