Run results for: querySelectorAll vs simple parse vs individual selectors

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Browser: Chrome 65

Operating system: Windows

Device Platform: Other

Date tested: 6 years ago

Test name	Executions per second
Original selector	335.1 Ops/sec
Parse selector	205227.9 Ops/sec
select one two jquery add	257864.4 Ops/sec
Select one two array	590998.4 Ops/sec

Script Preparation code:

//Add 100,000 elements
var frag = document.createDocumentFragment();
for (var i=0; i<10; i++){
  var outDiv = document.createElement('div');
  for (var j=0; j<100; j++){
    var midDiv = document.createElement('div');
    for (var k=0; k<100; k++){
      var inDiv = document.createElement('div');
      if(i==6 && j==60){
        if(k==60)
          inDiv.id="one";
        else if(k==61)
          inDiv.id="two";
      }
      midDiv.appendChild(inDiv)
    }
    outDiv.appendChild(midDiv)
  }
  frag.appendChild(outDiv);
}
document.body.appendChild(frag);

	// A simple way to check for HTML strings
	// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
	// Strict HTML recognition (#11290: must start with <)
	// Shortcut simple #id case for speed
var rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;

var selectorOne = '#one';
var selectorTwo = '#two';
var selectorBoth = selectorOne + ',' +selectorTwo;

Tests:

Original selector
var elements = document.querySelectorAll(selectorBoth); if( $(elements).length != 2 ) throw Error()
Parse selector
var selectors = selectorBoth.split(','); var ids = true; for(var i=0; i<selectors.length; i++) { var match = rquickExpr.exec( selectors[i] ); ids = ids && (selectors[i] = match[2]); } var elements = []; if(ids){ for(selector in selectors){ elements.push( document.getElementById(selector) ) } } else { elements = document.querySelectorAll(selectorBoth) throw Error("querySelectorAll"); } if( $(elements).length != 2 ) throw Error()
select one two jquery add
if( $('#one').add('#two').length != 2 ) throw Error()
Select one two array
if( $([document.getElementById('one'),document.getElementById('two')]).length != 2 ) throw Error()

Run results for: querySelectorAll vs simple parse vs individual selectors

Testing different ways to select a couple of ID'd elements from the DOM

Original selector

Parse selector

select one two jquery add

Select one two array