Regex + getElementById vs. Regex + querySelector (v211)

Revision 211 of this benchmark created on

Preparation HTML

<div id="block1">
	<div id="block2">
		<div id="block3">
			<div id="block4">
				<div id="block5">
					<div id="block6">
						<div id="block7">
							<div id="block8">
								<div id="block9">
									<div id="block10">
										content
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Setup

var block9 = document.getElementById('block9');
  var _rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
  var block1NameCss = "#block1"
  var block10NameCss = "# block10"
  var match

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById level 1
if (match = _rquickExpr.exec(block1NameCss)) {
  var block = document.getElementById(match[1]);
}
else {
var block = document.querySelector(block1NameCss);
}
ready
getElementById level 10
if (match = _rquickExpr.exec(block10NameCss)) {

} else {
  var block = document.getElementById("block10");
}
ready
querySelector simple
var block = document.querySelector("#block10");
ready
querySelector nested
var block = block9.querySelector('div');
ready

Revisions

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