getElementById vs. querySelector

JavaScript performance comparison

Revision 223 of this test case created by Sayed Baladoh

Preparation code

<p id="foo">Foo</p>
<p id="bar">Bar</p>
<p id="baz">Baz</p>
      
<script>
Benchmark.prototype.setup = function() {
  var $ = $ || {};
  
  $ = function(selector, context) {
  	var elements = (context || document).querySelectorAll(selector);
  	return (elements.length > 0)? elements : null;
  };
  
  $.filterOperators = [
  	{"o": "EQUALS", "c": "=", "label": "equals"},
  	{"o": "CONTAINS", "c": "*=", "label": "contains"},
  	{"o": "STARTS_WITH", "c": "^=", "label": "starts with"},
  	{"o": "ENDS_WITH", "c": "$=", "label": "ends with"}
  	
  ];
  
  $.getOperator = function ( k ) {
  	fo= $.filterOperators;
  	for ( var i = 0, n = fo.length; i < n; i++ ) {		
  		var o = fo[i].o,
  			c = fo[i].c;
  		if (o.toLocaleLowerCase() == k.toLocaleLowerCase()) return c;
  	}
  };
  
  $.id = function(id) {
  	var element;
  	if (document.getElementById)
  		element =  document.getElementById(id);
  	else if (document.all)
  		element =  window.document.all[id];
  	else if (document.layers)
  		element =  window.document.layers[id];
  	return (element)? element : null;
  };

};
</script>

Preparation code output

<p id="foo">Foo</p> <p id="bar">Bar</p> <p id="baz">Baz</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 with condition
var operator="EQUALS",
	value="bar";
if(operator=="EQUALS"){
 var element = $.id(value);
}else if(operator=="CONTAINS"||operator=="STARTS_WITH"||operator=="ENDS_WITH"){
	opr=$.getOperator(operator);
	elems = $("[id"+opr+"'"+value+"']");
}else if(operator=="NOT_EQUALS"||operator=="NOT_CONTAINS"||operator=="NOT_STARTS_WITH"||operator=="NOT_ENDS_WITH"){
	opr=$.getOperator(operator.substr(4));
	elems = $(":not([id"+opr+"'"+value+"'])");
}
pending…
querySelector with condition
var operator="CONTAINS",
	value="bar";
if(operator=="EQUALS"){
 var element = $.id(value);
}else if(operator=="CONTAINS"||operator=="STARTS_WITH"||operator=="ENDS_WITH"){
	opr=$.getOperator(operator);
	elems = $("[id"+opr+"'"+value+"']");
}else if(operator=="NOT_EQUALS"||operator=="NOT_CONTAINS"||operator=="NOT_STARTS_WITH"||operator=="NOT_ENDS_WITH"){
	opr=$.getOperator(operator.substr(4));
	elems = $(":not([id"+opr+"'"+value+"'])");
}
pending…
querySelector without condition
var operator="EQUALS",
	value="bar";
if(operator=="EQUALS"||operator=="CONTAINS"||operator=="STARTS_WITH"||operator=="ENDS_WITH"){
	opr=$.getOperator(operator);
	elems = $("[id"+opr+"'"+value+"']");
}else if(operator=="NOT_EQUALS"||operator=="NOT_CONTAINS"||operator=="NOT_STARTS_WITH"||operator=="NOT_ENDS_WITH"){
	opr=$.getOperator(operator.substr(4));
	elems = $(":not([id"+opr+"'"+value+"'])");
}
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

Foo

Bar

Baz